Question

我试图过滤并隐藏不包含特定字符串的div，但我只关心

有没有办法在元素上使用contains选择器但忽略它的子元素？

示例：

<div class="accessBox">Hello
 <ul> 
  <li>1</li>
  <li>2</li>
 </ul>
</div>

然后我会执行：

$('.accessBox').filter(":not(:contains('1'))").hide();

我的目标是隐藏div

Answer 1

这是怎么做的：

$('.accessBox').filter(function() {
    return $(this).find("li:contains('1')").length === 0;
}).hide();

Concept Verification Demo

Answer 2

$('ul li').filter(":not(:contains('1'))").hide();

Answer 3

您可以使用.contents()和.filter()来检查元素的直接TextNode个孩子：

$('.accessBox').filter(function() {
    return $(this).contents().filter(function() {
        if (this.nodeType !== 3) return false;  // 3 === Node.TEXT_NODE
        return this.nodeValue.match(/1/);
    }).length > 0;
}).hide();

上述工作没有关心孩子自己是什么类型的节点，因此比使用结构特定的选择器更通用。

Answer 4

您可以使用:has来测试后代/值，而无需更改＆＃34;当前＆＃34;来自div的元素：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/r83A9/2/

$(".accessBox:not(:has(li:contains('1')))").hide();

这相当于＆＃34;查找具有类accessBox的所有元素，其中没有包含值1和＃34;的任何li s。

鉴于该问题的措辞含糊不清，如果展示更好的示例HTML，我很乐意对此进行调整：）

使用包含不看儿童

4 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/r83A9/2/