Jquery 当第二个子div为空时隐藏父div

我有一个这样的结构：

<div class="parent">
   <div class="child1">Header</div>
   <div class="child2">
      <div class="grandchild"></div>
      <div class="grandchild"></div>
      <div class="grandchild"></div>
   </div>
</div>

我做错什么了吗？这是我贴的一张照片

编辑：

---

我想澄清这一点，而不是.child2为空.child2的childs div将显示为：none。我已经编辑了我的小提琴

这对你有用

$(document).ready(function() {
    var childDiv = $(".child2");

    if(childDiv.html() == ""){
        childDiv.parents().hide();
    }

});

---

由于和之间的空格，当前代码无法工作。如果删除该空白，则代码工作正常：

$.child2:empty.parent.hide； 父1 一般条款1 一般条款2 一般条款3 家长2 试试这个

$.each($(".child2"),function(){
   if($(this).children().length==0)
   {
     $(this).parent().hide();
   }
});

---

您应该修剪HTML内容：

$(".child2").filter(function() {
    return !$(this).html().trim();
}).parent().hide();

您的问题是您的DIV包含一些空格。在CSS4中，这将使用伪类工作

编辑：要检查div是否只包含隐藏的子项或没有显示的内容，可以检查其滚动高度：

$(".child2").filter(function() {
  return !this.scrollHeight;
}).parent().hide();

但最确定的方法是：

$(".child2").filter(function() {
  return $(this).children().length === $(this).children().filter(':hidden').length;
}).parent().hide();

---

第二个是空的。在CSS4中，对于您的情况，您可以使用什么是空？“没有文本或没有孩子吗？”@Mohammad所说的空是指当.child2的孩子出现在屏幕上时：没有。因此，从视觉上看，父div将为空。请使用$.child2:has:hidden.parent.hide。选中@Mohammad，如果只有child是隐藏的，而其他一些则不是，那么它将匹配，所以不要询问OPNo，这与使用：empty是相同的行为。编辑：事实上它甚至更错误，因为html只返回setyes中第一个匹配元素的内容，当然，由于$.child2具有HTML结构。但是div只能包含textNodes，因此您应该修剪它的HTMLcontent@Rory这是否也适用于.child2的子项显示时：无而不是为空。@flolaloop否，在这种情况下，它们将被计数。如果这是一个要求，请将其包括在问题中，那么只包含textNode的div呢？！

$(".child2").filter(function() {
  return $(this).children().length === $(this).children().filter(':hidden').length;
}).parent().hide();