检测是否显示DIV-差异与空DIV?

const elems = $('.foo');

elems.each(function() {
  let content = $(this).html().length;
  let display = $(this).css('display');
  if (content && display !== 'none') {
    console.log(this.id, 'displayed and not empty');
  } else {
    console.log(this.id, 'empty or not displayed');
  }
});

<div class="foo" id="bar" style="display: none;">
  <div>
    Something
  </div>
</div>
<div class="foo" id="baz"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

var elems = $('#a').contents();
var empty = elems.length == 0;
var containsVisibleElement = false;
elems.each(function(i, v) { //loop though all contained elemetns
  containsVisibleElement = $(this).is(':visible'); //check if element is visible
  if (containsVisibleElement ) {
    return false; //break out of loop as one visible is enough for our check
  }
});

if (empty || !containsVisibleElement) {
  $("#check").text("a is empty");
} else {
  $("#check").text("a is full");
}

#a div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='a'>
  <div>something</div>
</div>

<div id='check'></div>