Add a css class to an element if the element has a certain text via javascript

Question

I need to add the class .active-trail to an li element if the li element has a link (a) as a child element containing the word "Help".

Example:

<li class="last expanded dropdown">

  <a href="/test1" title="" class="dropdown-toggle" data-target="#" data toggle="dropdown">
    Help <span class="caret"></span>
  </a>

</li>

<li class="last expanded dropdown">

  <a href="/test1" title="" class="dropdown-toggle" data-target="#" data toggle="dropdown">
    Contact <span class="caret"></span>
  </a>

</li>

In the example above, I would like to add the class active-trail to the first li like so:

<li class="last expanded dropdown active-trail">

  <a href="/test1" title="" class="dropdown-toggle" data-target="#" data toggle="dropdown">
    Help <span class="caret"></span>
  </a>

</li>

<li class="last expanded dropdown">

  <a href="/test1" title="" class="dropdown-toggle" data-target="#" data toggle="dropdown">
    Contact <span class="caret"></span>
  </a>

</li>

Is this possible through javascript/jQuery, and if so, how? Thanks!

Adil Shaikh · Accepted Answer · 2014-02-01 06:34:13Z

2

Like this -

$('a').filter(function(){
  return $(this).text().indexOf('Help') > -1;
}).closest('li').addClass('active-trail');

answered Feb 1, 2014 at 6:34

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

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

Comments

SpoonNZ · Accepted Answer · 2014-02-01 06:36:24Z

0

$('li a').each(function() {
    if( $(this).text().toLowerCase().search('Help') >= 0 ) {
        $(this).closest('li').addClass('active-trail')
    }
})

Edit: I like Mohammad's solution better, but this should work too.

answered Feb 1, 2014 at 6:36

SpoonNZ

3,8491 gold badge22 silver badges25 bronze badges

Comments

Anid Monsur · Accepted Answer · 2014-02-01 06:36:37Z

0

$.each($('li a'),function() {
    if ($(this).text.indexOf('Help') > -1) {
        $(this).parent().addClass('active-trail');
    }
});

answered Feb 1, 2014 at 6:36

Anid Monsur

4,5381 gold badge19 silver badges24 bronze badges

Collectives™ on Stack Overflow

Add a css class to an element if the element has a certain text via javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related