Question

OK so I’m trying to use the contains() selector to modify the css of a div. Please see the fiddle: http://jsfiddle.net/6mdqf/

As you can see, the function selects the parent div even though it doesn’t directly contain the text “John”; the text is held in a child div.
If you delete the parent div then all works as it should.

How can I ensure only the child div which contains the text “John” is selected whilst the parent div and other children are left alone?

Hope my question makes sense…

code:

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

And the js

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

Answer 1

Another way is to call the children elements in the div and use the contains() as a selector in the children.

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

JSFiddle