How to add class to the element that contains a certain string in jQuery?

Question

I have this li list:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

How can I add a class "item-3" to the li element that contains "item 3" between the <li> and </li> tags?

Thanks in advance.

Jasper · Accepted Answer · 2011-12-02 18:05:36Z

14

$('li:contains("item 3")').addClass('item-3');

From the docs (http://api.jquery.com/contains-selector/):

The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of :contains() can be written as bare words or surrounded by quotation marks. The text must have matching case to be selected.

Here's a jsfiddle: http://jsfiddle.net/jasper/2wcqW/

answered Dec 2, 2011 at 18:05

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tomalak Over a year ago

Just as a side-note: the :contains() selector is case-sensitive. Case-insensitive searches require .filter() and a custom function.

arb · Accepted Answer · 2011-12-02 18:06:53Z

5

$('li').filter(function(){
    return $(this).text() === 'item 3'
}).addClass('yourClass');

answered Dec 2, 2011 at 18:06

arb

7,8847 gold badges35 silver badges67 bronze badges

1 Comment

Jasper Over a year ago

+1 FWIW, this is the fastest method between: :contains(), $.each() and .filter(). Here's some proof: jsperf.com/jquery-each-vs-contains

JaredPar · Accepted Answer · 2011-12-02 18:05:26Z

3

Try the following

$(document).ready(function () {
  $('ul li').each(function () {
    if ($(this).text() === "item 3") {
      $(this).addClass('item-3');
    }
  });
});

Fiddle: http://jsfiddle.net/srpAX/

answered Dec 2, 2011 at 18:05

JaredPar

759k151 gold badges1.3k silver badges1.5k bronze badges

4 Comments

Jasper Over a year ago

+1 FWIW; This is faster than using :contains. Here is a jsperf to prove: jsperf.com/jquery-each-vs-contains

JaredPar Over a year ago

@Jasper I'd never seen that sight before. Amazing.

arb Over a year ago

Is filter ALWAYS the fastest way to do this kind of task or is it situation specific?

Jasper Over a year ago

@Zero21xxx I couldn't say off the top of my head. I generally use jsperf in a specific situation to see what is the fastest method. Something to remember is that different browsers will give different results and this is especially true with old browsers (...IE6).

xbrady · Accepted Answer · 2011-12-02 18:05:57Z

2

$('li:contains("item 3")').addClass('item-3');

answered Dec 2, 2011 at 18:05

xbrady

1,70314 silver badges23 bronze badges

1 Comment

jbabey Over a year ago

will work correctly, but I do not think it is necessary to first select on ULs

Enrique Moreno Tent · Accepted Answer · 2011-12-02 18:05:53Z

1

$("li").each(function(){
    if($(this).text() == "Item 3"){
        $(this).addClass("item-3");
    }
});

answered Dec 2, 2011 at 18:05

Enrique Moreno Tent

25.6k35 gold badges110 silver badges195 bronze badges

Collectives™ on Stack Overflow

How to add class to the element that contains a certain string in jQuery?

5 Answers 5

1 Comment

1 Comment

4 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

4 Comments

1 Comment

Comments

Related