jquery if element contains text, add class to parent div

Question

I need to add a class to a parent div if one of the children elements contains the word "Sponsored."

<div id="post-item">   
  <span class="tags">
      <a href="#">Blogs</a>            
  </span>         
</div>

<div id="post-item">   
  <span class="tags">
      <a href="#">Sponsored by Lorem Ipsum</a>            
  </span>       
</div>

I am currently trying to use parent().addClass but it's not working for some reason. You can see an example in this fiddle: http://jsfiddle.net/VrPdF/

if (jQuery('a:contains("Sponsored")').length) {
    jQuery(this).parent('#post-item').addClass('sponz');

}

Any and all help would be greatly appreciated - thanks !

Satpal · Accepted Answer · 2016-04-27 09:23:03Z

19

IDs must be unique, so use class to identify parent. You can use .closest() to identify parent with class post-item.

HTML

<div class="post-item">   
  <span class="tags">
      <a href="#">Blogs</a>  
    <h3>Lorem</h3>          
  </span>         
</div>

<div class="post-item">   
  <span class="tags">
      <a href="#">Sponsored by Lorem Ipsum</a>            
  </span>       
    <h3>Lorem</h3>
</div>

JavaScript

jQuery('a:contains("Sponsored")').closest('.post-item').addClass('sponz');

DEMO

:has() Selector can also be used

Selects elements which contain at least one element that matches the specified selector.

jQuery('.post-item:has(a:contains("Sponsored"))').addClass('sponz');

edited Apr 27, 2016 at 9:23

answered Feb 2, 2014 at 20:32

Satpal

133k13 gold badges168 silver badges171 bronze badges

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

1 Comment

user3263728 Over a year ago

Thanks !! This is a great fix.

adeneo · Accepted Answer · 2014-02-02 20:30:49Z

7

You don't have to check the length, it either returns an element or it doesn't, and you'll have to use closest(), as #post-item is not the immediate parent element.

I used classes as you can not use duplicate ID's

$('a:contains("Sponsored")').closest('.post-item').addClass('sponz');

FIDDLE

answered Feb 2, 2014 at 20:30

adeneo

319k29 gold badges409 silver badges392 bronze badges

1 Comment

user3263728 Over a year ago

Thanks !! This is exactly the reason it wouldn't work and a great fix.

Krishanu Dey · Accepted Answer · 2014-02-02 20:39:01Z

1

Following should be your javascript.

$(document).ready(function () {
    jQuery('a:contains("Sponsored")').closest('#post-item').addClass('sponz');
});

Demo

answered Feb 2, 2014 at 20:39

Krishanu Dey

6,4067 gold badges53 silver badges69 bronze badges

Collectives™ on Stack Overflow

jquery if element contains text, add class to parent div

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related