隐藏div,如果它们是空的

Question

我有一些div可能是空的(取决于服务器端逻辑).

<div id="bar">

<div class="section" style="display:block;"></div>
<div class="section" style="display:block;"></div>
<div class="section" style="display:block;"></div>

</div>

如果他们在div中没有​​任何html(带有class部分),我只想隐藏它们.

我怎样才能做到这一点？

Answer 1

jQuery有一个:empty选择器.所以,你可以简单地做:

$('div.section:empty').hide();

Answer 2

这是一个CSS3解决方案,适合任何有兴趣的人

div:empty {
  display:none;
}

Answer 3

有很多选择，这完全取决于您的喜好。答案越紧凑，可读性就越差，速度很重要，空函数应该有多有效，不包含节点的元素与元素不同:empty。

最紧凑/慢/非常有效/可读/通用选择器

$('.section:empty').hide();

非常紧凑/快一点（仍然很慢）/非常有效/可读/不太通用的选择器

$('div.section:empty').hide();

紧凑/更快/非常有效/可读/特定选择器

$("#bar").find('div.section:empty').hide(); 

我将坚持使用更具体的选择器，因为它更快。

不太紧凑/甚至更快/非常有效/可读性仍然较差

$("#bar").find('div.section').filter(function(i,elem) {

    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
        if ( elem.nodeType < 6 ) {
            return false;
        }
    }
    return true;

}).hide();

仍然不太紧凑/甚至更快仍然/非常有效/仍然不太可读

$("#bar").find('div.section').each(function(i,elem){

    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
        if ( elem.nodeType < 6 ) {
            return;
        }
    }
    $(this).hide();        
})

紧凑/更快/效率较低/可读性较差

// Faster Still but less precise
$("#bar").find('div.section').filter(function() {
    return !this.firstChild; 
}).hide();

不太紧凑/速度更快/效率较低/可读性较差

$("#bar").find('div.section').each(function(){
    if(!this.firstChild){
        $(this).hide();            
    }           
})

有效的解决方案

更有效的解决方案使用“空” jquery过滤器所使用的相同方法，它尝试:empty通过考虑节点类型来复制 CSS3 伪类的功能。例如，如果子元素具有 nodeType == COMMENT_NODE( <!-- -->)，则父元素仍将被视为空。

所有这些方法都可以通过替换.hide()并.addClass('hide')在.hideCSS 中添加一个类来改进。

<style>
    .hide {
        display:none;
    }
</style>

但如果这听起来像是适合您的解决方案，那么 @elliot-wood 的 CSS3 答案可能更适合。

我个人的喜好

$("#bar").find('div.section').filter(function() {
    return !this.firstChild; 
}).hide();

尽管这种方法不检查 nodeType 并且它使用.filter()方法而不是更快的.each(). 它只是一个更紧凑和可读的解决方案。