Filter elements out of a jquery object based on text content

Question

I am trying to use contains with 'this' keyword, but it is giving an error.

JS

$(function(){
    var check=$('ul').find('li').filter(function(){
        return $(this:contains('two')).css('color','red')
    })
})

HTML

<ul>
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="one">one</li>
    <li id="two">two</li>
</ul>

do you want to make sure that "two" exists within it? or that "two" is the only thing within it? — Smern, Aug 19 '13 at 15:05
Looks like you're missing the close parenthesis: `$(this).contains(...` — Daniel Gimenez, Aug 19 '13 at 15:06
`var check = $("ul li:contains('two')").css('color', 'red');` — j08691, Aug 19 '13 at 15:07
Your syntax looks bad and your use of `contains` uninformed. — Grant Thomas, Aug 19 '13 at 15:07
IDs **must** be unique on the page. Your code may just be for demonstration purposes but you need to be aware of this limitation — Bojangles, Aug 19 '13 at 15:08

Smern · Accepted Answer · 2013-08-19T15:19:11.843

Is this what you are looking for?

Fiddle

$(function () {
    $('ul').find('li').filter(function () {
        return this.innerHTML == 'two';
    }).css('color','red')
})

Or to match it anywhere in the element (rather than only "two" being within it):

Fiddle

$(function () {
    $('ul').find('li').filter(function () {
        return /two/.test(this.innerHTML);
    }).css('color','red')
})

Also, if it matters... chaining methods (.find().filter()) seems to be faster than using contains:

Performance test created for this specifically
Another related test

And your id's should be unique - but I'm assuming that it is just copy/pasting for sample code and that you don't actually have duplicate id's in your actual code.

score 5 · Answer 2 · answered Aug 19 '13 at 15:08

5

Without filter as simple as

$("ul li:contains('two')").css('color', 'red');

WORKING DEMO

answered Aug 19 '13 at 15:08

Suresh Atta

120,458
37
198
307

this could be as well an accepted answer! – Victor Sep 27 '22 at 17:52

Venkata Krishna · Answer 3 · 2013-08-19T16:43:54.100

1

$(this).text() == 'two';

Get the current li's text & check if it has the value "two".

edited Aug 19 '13 at 16:43

answered Aug 19 '13 at 15:09

Venkata Krishna

14,926
5
42
56

I see what you're saying – Venkata Krishna Aug 19 '13 at 16:33

Filter elements out of a jquery object based on text content

3 Answers3

Linked