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中的children元素，并使用contains()作为子项中的选择器。

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

JSFiddle

Answer 3

因为你首先有一个div而且它在里面搜索并在div中找到John并选择all，试试这个：

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

jQuery contains（） - 只选择底部div

4 个答案: