Question

如果所有这些yellowrubberbox容器都是Office成员但没有办公室成员的列表，即黄色内容的文本只是“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>

为什么不这样做？

var YellowBoxContent=$.trim($('.yellow-content').text());   
        if (/Office Members/.test(YellowBoxContent)){      
        $('.yellow-rubber-box').hide();   
        }

Answer 1

您正在测试该值包含“Office成员”。这总是匹配的。为什么不测试平等？

YellowBoxContent === "Office Members"

http://jsfiddle.net/xdzka/1/

Answer 2

如果你想看一个对象是否为空，但是包含子节点（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();
    }
});

演示：http://jsfiddle.net/HKdqp/

编辑：在更多考虑之后，可能没有文本节点，或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();
        }
    });
});

演示：http://jsfiddle.net/HKdqp/2/

如果你不想搞乱文本节点，并且想要更短的代码，你可以简单地删除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);
    });
});

演示：http://jsfiddle.net/HKdqp/3/

Answer 3

除了h2之外，我会测试.yellow-content中的其他元素，而不是将所有内容转换为字符串：

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

contents将返回元素和文本节点。

Answer 4

你试试这个：

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

演示：http://jsfiddle.net/GWur3/8/

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

4 个答案: