Jquery 如果子div为空，则隐藏父div

如果YellowRuberBox包含的所有内容都是Office成员，但没有Office成员的列表，即yellow内容的文本只是“Office成员”，那么我需要隐藏黄色的橡胶框

<div class="yellow-rubber-box w-218">
        <span class="yellow-corner left-top">&nbsp;</span>
        <span class="yellow-corner right-top">&nbsp;</span>
        <span class="yellow-corner left-bottom">
        &nbsp;</span>
        <span class="yellow-corner right-bottom">
        &nbsp;</span>
        <div class="yellow-content"><h2>Office Members</h2>
        Sometimes there is no content inside this div and need to hide the yellow rubber box if this is just equals to "Office Members" which is the heading
        </div>
    </div>

---

您正在测试该值是否包含“Office成员”。这将永远匹配。为什么不进行平等测试呢

YellowBoxContent === "Office Members"

---

我将测试

中的其他元素。黄色内容

除了h2之外，而不是将所有内容转换为字符串：

$(".yellow-content").contents().length > 1

---

contents

将返回元素和文本节点。

如果要查看对象是否为空，但是否包含子节点（

h2

），我想您需要分析文本节点：

$('.yellow-content').contents().each(function() {
    // If it's a text node, and it does not contain non-space
    // characters, hide the `.yellow-rubber-box` it is in
    if (this.nodeType == 3 && !this.textContent.match(/\S/)) {
        $(this).closest('.yellow-rubber-box').hide();
    }
});

演示：

Edit：仔细考虑后，可能没有文本节点，或者在

h2

的两侧都有文本节点（空格）。此代码更为健壮，因为它检查在

h2

之外包含非空格字符的任何文本节点：

$(function() {
    $('.yellow-content').each(function() {
        var hide = 1;
        $(this).contents().each(function() {
            // If it's a text node, and it contains text, don't hide
            // the parent `.yellow-rubber-box`
            if (this.nodeType == 3 && this.textContent.match(/\S/)) {
                hide = 0;
            }
        });
        if (hide) {
            $(this).closest('.yellow-rubber-box').hide();
        }
    });
});

演示：

如果不想弄乱文本节点，并且希望代码稍微短一点，只需删除

h2

，检查剩余的文本是否为空，如果为空，则隐藏div。然后您可以将

h2

添加回：

$(function() {
    $('.yellow-content').each(function() {
        var h2 = $(this).find('h2').remove();
        if($(this).text().match(/^[\s\n\r]*$/) ) {
            $(this).closest('.yellow-rubber-box').hide();
        }
        $(this).prepend(h2);
    });
});

演示：

您只需尝试一下：

  var YellowBoxContent=$.trim($('div.yellow-content').text());
  var search = /Office Members/;
  if (search.test(YellowBoxContent))
      {
          $("div[class^='yellow-rubber-box']").hide();
      }

---

Demo：

子节点

不返回文本节点。问题不清楚，但在这种情况下，

contents（）

将同时返回这两个节点。我发现这种方法（在我自己的实验中）的问题是，空格算作文本节点，所以

将返回长度3。除了代码格式之外，这与原始解决方案有何不同？更糟糕的是，为什么不使用类选择器呢？

  var YellowBoxContent=$.trim($('div.yellow-content').text());
  var search = /Office Members/;
  if (search.test(YellowBoxContent))
      {
          $("div[class^='yellow-rubber-box']").hide();
      }