jquery - 子组件“空”时隐藏 div（无显示）

Question

在 jQuery 方面相当新手，所以在此先感谢您对我的支持 :)

对于设置宽度和高度的 div，我正在寻找一种方法来隐藏（设置显示：无；）当浏览器上不显示任何内容时这些容器。更常见的是，当它们嵌套了 HTML 会使事情变得有点复杂时，因为需要检查子组件是否为空/显示：无；。

到目前为止，我最接近的是使用 .text() 方法，将其修剪为空白，并检查长度。然而， .text() 会忽略样式并抓取隐藏的文本，并且由于它不返回 DOM 结构，因此很难过滤掉。

这是我一直在玩的小提琴：http: //jsfiddle.net/JbBkQ/5/ 我希望其中包含“隐藏内容”的 div 被第一个 jQuery 函数捕获，因为

隐藏的内容被包围，它的显示设置为无。

那有意义吗？

score 1 · Accepted Answer

选择您要查找的 div 迭代它们并根据是否可见过滤子集合。如果没有可见的子元素隐藏它自己的元素。

$("div").each(function(){
   if(!this.children().find(":visible").length){
       this.hide();
   }
}

如果您选择的 div 可以相互嵌套，这将不会正常工作（一个 div 与另一个被隐藏的 div 可能不会自己隐藏，具体取决于选择的顺序）

编辑

如果您只想下降一层，则可以使用 filter 而不是 find

$("div").each(function(){
     if(!this.children().filter(":visible").length){
         this.hide();
     }
}

score 0 · Accepted Answer

如果理解正确，您可以尝试使用:empty伪类

在线演示

div:empty {
    display: none;
}