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（有课程部分），我只想隐藏它们。

我该怎么做？

Answer 1

jQuery有一个:empty选择器。所以，您可以这样做：

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

Answer 2

这是一个针对任何有兴趣的人的CSS3解决方案

div:empty {
  display:none;
}

Answer 3

为什么没有人使用.filter？

$("div.section").filter(function() {
    return this.childNodes.length === 0;
}).hide();

与使用.each相比，这是一个更优雅的解决方案。

Answer 4

如果div包含空格或换行符，则此代码可能会有帮助...

$(document).ready(function() {
   str = $('div.section').text();
   if($.trim(str) === "") {
     $('div.section').hide();
   }
});

Answer 5

有很多选择，一切都取决于您的偏好。答案越紧凑，它的可读性就越低，速度很重要，空函数的效率如何，不包含节点的元素与: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过滤器使用的相同方法，它会尝试通过考虑nodeType来复制CSS3 :empty伪类的功能。例如，如果子元素具有nodeType == COMMENT_NODE（），那么父元素仍将被视为空。

通过将.hide()替换为.addClass('hide')并在CSS中添加.hide类，可以改进所有这些方法。

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

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

我的个人偏好

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

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

Answer 6

$('div').each(function() {
if($(this).html().size() == 0) $(this).remove();
});

如果您想稍后在同一页面中使用div，最好使用$(this).hide();代替$(this).remove();，因为如果您使用remove（），则会删除div;

Answer 7

您是否可以访问服务器逻辑？

另外，客户端可以执行以下操作：

$(function() {
$('div').each(function() {
       if ($(this).html()=="") {
             $(this).hide();
       }
    }); 
});

Answer 8

将display:block;替换为display: none;

编辑：哦，我看到你想使用jQuery，然后使用.hide（）：http://api.jquery.com/hide/

Answer 9

var tmp = System.IO.Path.GetTempPath ();

Answer 10

我使用了过滤答案，但是当没有可见内容时，this.childNodes.length仍然保持返回1，因此最终将过滤器与trim结合起来。

$("div").filter(function() {
    return j(this).text().trim() === "";
}).hide();

隐藏div，如果它们是空的

10 个答案:

我的个人偏好