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

Question

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

我尝试 select 第二个 div，其中包含如下文本。

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

jQuery命令：

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

不幸的是，这也 selects（使红色）我想要 select 的 div 的所有父 divs。这是因为 :contains 在 selected 元素及其后代中寻找匹配项。

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

Answer 1

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

您可以使用 id 或 class 来识别这些 div，因此您的选择器将特定于这种情况：

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

演示：

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

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

或者，在您的特定情况下，在您的选择器中使用限制以避免具有子节点 :not(:has(>div)):

的 div

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

演示：

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

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

Answer 2

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

示例：

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

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

编辑：

以下 jQuery 中 filter() 的示例。

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

<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>

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

How to ignore matches in descendent elements when using jQuery :contains

html

javascript

css

jquery

jquery-selectors