jquery - jQuery contains() - 只选择底部的 div

Question

好的，所以我正在尝试使用 contains() 选择器来修改 div 的 css。请看小提琴：http: //jsfiddle.net/6mdqf/

如您所见，该函数选择了父 div，即使它不直接包含文本“John”；文本保存在子 div 中。如果您删除父 div，则一切正常。

如何确保仅选择包含文本“John”的子 div，而父 div 和其他子级不被选中？

希望我的问题有意义...

代码：

<div>
    <div>John Resig</div>
    <div>George Martin</div>
    <div>Malcom John Sinclair</div>
    <div>J. Ohn</div>
</div>

和 js

$("div:contains('John')").css("text-decoration", "underline");

Answer 1

由于父 div 具有包含该特定文本的子元素，因此您的选择器会选择父 div 及其子元素，请尝试以下操作。

$("div:not(:has(*)):contains('John')").css("text-decoration", "underline");

http://jsfiddle.net/rwQ3u/

Answer 2

另一种方法是在 div 中调用子元素，并在子元素中使用contains()选择器。

$("div").children(":contains('John')").css("text-decoration", "underline");​

JSFiddle

Answer 3

因为您首先有一个 div 并且它在其中搜索并在 div 中找到 John 并全选，所以试试这个：

<div>
    <div class="search">John Resig</div>

    <div class="search">George Martin</div>
    <div class="search">Malcom John Sinclair</div>
    <div class="search">J. Ohn</div>
</div>
​$(document).ready(function(){
    $("div .search:contains('John')").css("text-decoration", "underline");
});

Answer 4

$("div>:contains('John')").css("text-decoration", "underline");

编辑jsFiddle：http: //jsfiddle.net/6mdqf/1/