使用jQuery时如何忽略后代元素中的匹配：contains

Question

我看了jQuery selector for an element that directly contains text?，但建议的解决方案都非常复杂。

我尝试选择第二个div，其中包含一些文字如下。

<div>
    <div>
        mytext
    </div>
</div>

jQuery命令：

$('div:contains("mytext")').css("color", "red)

不幸的是，这也会选择（生成红色）我想要选择的divs的所有父div。这是因为:contains在所选元素及其后代中查找匹配。

是否有一个类似的命令，它不会在后代中寻找匹配？我不想选择所有父divs，只选择直接包含文字的div。

Answer 1

探测器是$('div:contains("mytext")')将匹配包含divs文本的所有myText或其子节点包含它的所有id。

您可以使用class或$('div.special:contains("mytext")').css("color", "red"); 来识别这些div，这样您的选择器就会针对这种情况进行识别：

$('div.special:contains("mytext")').css("color", "red");

<强>演示：

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div class="special">
        mytext
    </div>
</div>

＆＃13;

:not(:has(>div))

＆＃13;

＆＃13;

＆＃13;

或者，在您的特定情况下，在选择器中使用resitriction以避免具有$('div:not(:has(>div)):contains("mytext")').css("color", "red"); 子节点的div：

$('div:not(:has(>div)):contains("mytext")').css("color", "red");

<强>演示：

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>
        mytext
    </div>
</div>

＆＃13;

id

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在jQuery中使用div方法找到目标find()。

示例：

＆＃13;

＆＃13;

$('div').find(':contains("mytext")').css("color", "red");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>
        mytext
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

修改

在jQuery中使用filter()示例。

＆＃13;

＆＃13;

$('div').filter(function(i) {
  return this.innerHTML.trim() == "mytext";
}).css("color", "red");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  test2
  <div>
    test
    <div>
      mytext
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;