如果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>

如果这些拥有class为"section"的div中没有包含任何HTML，我只想隐藏它们。如何做到这一点？

- Blankman

---

正如您所看到的，有许多解决方案可供选择。对于您来说，逐个了解它们的工作原理并查看它们的差异（如果有的话）是一件好事。 - Michael Laffargue

正如你提到的服务器端逻辑，最高效的方式是在没有内容时不渲染它们（例如 <?php if(content!="") { ?><div class="section" style="display:block;"></div><?php } ?>）。 - enguerranws

Answer 1

jQuery有一个:empty选择器。因此，您可以简单地执行以下操作：

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

- gen_Eric

---

@Beaniie：你所说的“PHP标记”是什么意思？PHP代码在服务器上运行，并生成发送到浏览器的输出。因此，如果PHP代码输出任何内容，则<div>将不会为空。 - gen_Eric

据我理解，当一个 div 是空的并且高度是自适应的时候，它会折叠起来。然而，向 div 添加 PHP 标记在某种意义上是不同的，因为浏览器在加载时首先识别该 div 中有内容。即使在页面加载后该 div 中没有任何内容，它也不会完全折叠。 - Lewis

扩展我上一条留言 - <div><?php echo "flagErr"; ?></div> 这个 div 在页面加载时是空的，但并没有完全折叠，只有当页面发现错误时，该 div 才会填充文本。我只能相信 php 代码被解释为文本，然后被识别为代码。但对此我不确定... - Lewis

@Beaniie：如果PHP代码被“解释为文本”，那么你的服务器出了问题，PHP代码没有被运行。可能发生的情况是你得到了<div>\t\t\t</div>或者其他类似的东西（多余的空格，我认为已经被折叠了），这些可能被视为非空。 - gen_Eric

@Rocket Hazmat: 通过测试，我发现 PHP 是正常工作的，除了 div 在载入时未折叠外没有出现任何问题。我觉得这很奇怪，因为 div 在载入时是空的，但在提交表单并发现错误数据后，PHP 会在该 div 中填充通知。在我看来，PHP 程序似乎很好，问题出在 HTML 标记上。 - Lewis

Answer 2

这里是一个CSS3的解决方案，适用于任何有兴趣的人。

div:empty {
  display:none;
}

- Elliot Wood

---

优雅的解决方案，但并不总是有效。https://css-tricks.com/almanac/selectors/e/empty/ - MickaelFM

哇，太棒了，不错的发现！ - Elliot Wood

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过滤器相同的方法，它尝试通过考虑节点类型来复制CSS3 :empty 伪类的功能。 例如，如果一个子元素的nodeType == COMMENT_NODE（<!-- -->），那么父元素仍将被视为空。

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

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

但如果这听起来对你来说是一个合适的解决方案，那么@elliot-wood 的CSS3答案可能更加适合。

我的个人偏好

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

尽管这种方法没有检查节点类型，并且使用了.filter()方法而不是更快的.each()。但这只是一种更紧凑、可读性更强的解决方案。

- TarranJones

Answer 4

为什么没有人使用.filter？

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

这是一种比使用.each更为优雅的解决方案。

- Raynos

Answer 5

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

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

- RVC

Answer 6

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

如果您想在同一页中稍后使用divs，最好使用$(this).hide();而不是$(this).remove();，因为如果使用remove()，divs将被删除。

- user657496

Answer 7

你有服务器逻辑的访问权限吗？

否则，你可以在客户端做类似这样的事情：

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

- Michael Laffargue

---

谢谢，我建议：$(this).html().trim() == "" - Valamas

Answer 8

将 display:block; 替换为 display:none; 编辑：哦，我看到你想要使用jQuery，那么使用 .hide() 函数：http://api.jquery.com/hide/

- Thew

Answer 9

$('div.section:empty').css("display", "none");

- samjco

Answer 10

我使用了过滤答案，但是当没有可见内容时，this.childNodes.length仍然返回1，因此最终将过滤器与修剪组合在一起。

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

- Jussi Palo