Question

我有一个包含三个子div的父div，我想检查子div以查看它们是否为空，如果它们都是空的，我想隐藏父div，以便背景在我的设计中消失。 / p>

<div class="main">
    <div class="tot1"></div>
    <div class="tot2"></div>
    <div class="tot3">test</div>
<div>

jQuery(".tot1:empty, .tot2:empty, .tot3:empty").parent().hide();

Answer 1

其他答案都很好，但出于性能原因，我推荐这个：

$('.main').each(function () {
  var $main = $(this),
      $allChildren = $main.children();
      $allEmptyChildren = $allChildren.filter(':empty');
  $main.toggle($allChildren.length !== $allEmptyChildren.length);
});

即使页面中有多个.main元素，它也能正常工作。
它缓存$(this)的值并重用查询结果以提高性能。
它不再hide() .main和show()它（为了避免重画）。
父节点上不需要任何额外的标记。
即使您稍后决定将子节点从<div>更改为更具语义的内容，它也能正常工作。
当所有孩子都空了时，它不仅会隐藏.main，还会在孩子有文字时显示它们。所以它处理隐藏和显示。您所要做的就是再次运行它。

源代码非常明确：它找到所有直接的孩子。然后找到空的。如果空子节点的数量等于所有子节点的数量，则它隐藏父节点（甚至不使用parent()函数）。这可能是一些代码行，但速度很快。

试试live。

Answer 2

将class=".parentClass"添加到您的父元素并添加此功能：

var emptyCounter = 0
jQuery(".parentClass div").each(function () {
   if($(this).is(':empty')) {
      empty++
   }
   emptyCounter--
});
if(emptyConuter === 0){
    $(".parentClass").hide();
}

http://jsfiddle.net/ktzluke10/ukb65ec8/3/

Answer 3

最好的办法是扭转它：

jQuery('.main') // find the parent
  .hide() // hide it
  .find('> div:not(:empty)') // find child divs that are not empty
  .each(function() { // use each in order to prevent errors when set is empty
    jQuery(this).parent().show(); // show the parent of this non-empty element
    return false; // stop processing this each
  })
;

因此，这将隐藏所有.main元素，并仅显示那些具有非空子元素的元素。

见这里： http://jsfiddle.net/L89z5o6o/

<强>更新

试图缩短它，这是另一种选择：

jQuery('.main') // find the parents
  .not(':has(> div:not(:empty))') // select only those that have no children with content
  .hide() // hide them
;

见这里：http://jsfiddle.net/zs3ax288/

如果要检查各种子元素，可以删除div。

Answer 4

我会选择这样的简单选择器：

jQuery(".main:empty *:empty").parent().hide();

jQuery：如果所有子div的html为空，则隐藏父div

4 个答案: