How do I use jQuery to select an element that directly contains some specified text?

Question

The jQuery selector :contains(text) selects an element if the matching text appears directly within the selected element, in any of that element's descendants, or a combination thereof.
I want to select an element if and only if the matching text appears directly within the selected element. What should I do?

For example,

<ul>
    <li id="1">
       <a><img src="la.gif"></a>
       happy birthday 
       <ul><li>radom</li></ul>
    </li>
    <li id="2">
       <a><img src="la.gif"></a>
       sad 
       <ul><li>happy</li></ul>
    </li>
</ul>

I want to select the li that contains the word "happy" (don't select a li if only its descendant contains the word "happy"). Then only li#1 should be selected.

The following does NOT do what I want because it will select both li#1 and li#2:

$('li:contains("happy")');

possible duplicate of [jQuery selector for an element that directly contains text?](http://stackoverflow.com/questions/7896455/jquery-selector-for-an-element-that-directly-contains-text) — j08691, Mar 09 '12 at 21:51
Having any content in a `ul` or `ol` other than a `li` is invalid HTML. — jmoerdyk, Mar 09 '12 at 21:55
Sorry guys I gave bad html examples. Fixed it. Please check out the updated question. Thanks. — user110, Mar 09 '12 at 21:59
@user1031868 Can you tell us what is the expected output for the above markup? — Selvakumar Arumugam, Mar 09 '12 at 22:28
@SKS, I want to select li#1 (since it's a li that directly contains "happy") and add a class to it. — user110, Mar 09 '12 at 22:30
@user1031868 I think I understood now, Please check the edits and the demo.. let me know if that is something you want. http://jsfiddle.net/skram/HwB9D/7/ — Selvakumar Arumugam, Mar 09 '12 at 22:39

Selvakumar Arumugam · Answer 1 · 2012-03-09T22:55:16.817

3

Edit: As from your updated code, I think you need to use .contents() and check for nodeType to make sure it is a text node and then compare it to the text as you need.

$('ul li').contents().each( function () {
    if (this.nodeType == Node.TEXT_NODE && this.nodeValue.match(/happy/)) {
        $(this).closest('li').css('border', '1px solid red');
    }
});

or using .filter(),

$('ul li').contents().filter( function () {
    if (this.nodeType == Node.TEXT_NODE && this.nodeValue.match(/happy/)) {
         return true;       
    }
}).closest('li').css('border', '1px solid red');

DEMO

Let me know if this works..

ul should only contain li tags.. like below,

<ul>
    <li id="1">happy</li>
    <li id="2">sad <div>happy</div></li>
</ul>

Assuming your html like that, below is the script to get the first list,

$('ul li').filter (function () {
    if ($(this).text() == 'happy') return true;
});

.filter will return the li that has text 'happy'.

DEMO

edited Mar 09 '12 at 22:55

answered Mar 09 '12 at 21:50

Selvakumar Arumugam

79,297
15
120
134

@Niko Are you mentioning selecting '
'? It can be done, but that is not a valid ul construct.
– Selvakumar Arumugam Mar 09 '12 at 21:56
I gave a bad example. Please check out the updated question. My problem is if li has descendants that contains the specified text but li itself doesn't directly contains it, I do NOT want to select it. – user110 Mar 09 '12 at 21:57
Yeah, that's not what I mean, you're right about that. But what if the `
` contains a text like "happy birthday"? `:contains` would select this node, your filter won't.

Niko

Mar 09 '12 at 21:59

$(this).text() will get the text of all desendents of the selected element. If the selected element has a child element and then the proper text, this would still return that element. – Kevin B Mar 09 '12 at 22:00

Hmm, I understand it in a different way: The node's text must *contain* the word, it does not need to be equivalent to it. And furthermore the filter must not select a node like `

happy

`. But you may be right. – Niko Mar 09 '12 at 22:12

score 0 · Answer 2 · answered Mar 09 '12 at 21:59

Try using .filter() for a more specific check:

alert(
    $("ul").filter(function(){return $.trim(this.childNodes[0].nodeValue) === "happy"})[0].id
);

It checks the nodeValue of the first child node of each ul to see if it is a text node that contains "happy".

How do I use jQuery to select an element that directly contains some specified text?

2 Answers2