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

Question

在jQuery方面相当新手，所以提前感谢与我合作：）

对于设置宽度和高度的div，我正在寻找隐藏（设置display：none;）这些容器的方法，当浏览器上没有显示任何内容时。更确切地说，当它们嵌套HTML时会使事情变得复杂，因为需要检查子组件的空白/显示：无;。

我到目前为止最接近的是使用.text（）方法，修剪空格，并检查长度。但是，.text（）忽略样式并抓取隐藏文本，因为它不返回DOM结构很难过滤。

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

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

这有意义吗？

Answer 1

选择你想要的div 迭代它们并根据是否可见来过滤子集合。如果看不到孩子则隐藏自己的元素。

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

如果您选择的div可以嵌套在彼此内部，那么这将无法正常工作（具有另一个被隐藏的div的div可能不会自行隐藏，具体取决于选择的顺序）

修改

如果您只想降低一个级别，可以使用过滤器而不是找到

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

Answer 2

如果您理解正确，可以尝试使用:empty pseudo class online demo

div:empty {
    display: none;
}