Add class to parent div if there has specific class

Question

Trying to add class to parent div <div class="widget-content"> if .widget-content li a has specific class .ifthis.

HTML:

<div class="widget-content">
<ul>
<li><a href="https://twitter.com/slycolor" class="ifthis"> <b>This Text Should Red</b></a>
</li>

<li><a href="https://www.facebook.com/slycolor" class="ifthis"> <b>This Text Should Red</b></a>
</li>
</ul>
</div>

I have tried This:

$('.widget-content li a').has('.ifthis').parent('.widget-content').addClass('social-sidebar');

But not working, see this example fiddle.

Pranav C Balan · Accepted Answer · 2015-08-25 19:52:57Z

5

Select children which have class ifthis then select it's parent using parents() or closest()

$('.widget-content li a.ifthis').parents('.widget-content').addClass('social-sidebar');

OR

$('.widget-content li a.ifthis').closest('.widget-content').addClass('social-sidebar');

Your code is not working because,

has() will only check that it's descendant has contain that selector, you need filter() instead.
parent() will only select immediate parent , so you should use parents() or closest().

With your code :

$('.widget-content li a').filter('.ifthis').parents('.widget-content').addClass('social-sidebar');

edited Aug 25, 2015 at 19:52

answered Aug 25, 2015 at 17:46

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

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

3 Comments

AmmarCSE Over a year ago

Good, also .has() returns a boolean, not a jQuery object you can operate on

Pranav C Balan Over a year ago

@AmmarCSE : nop, has() returns jquery object , api.jquery.com/has. I think you were talking about is()

AmmarCSE Over a year ago

@PranavCBalan, my silly mistake. Thanks for the correction :)

Community · Accepted Answer · 2020-06-20 09:12:55Z

Use this:

$('a.ifthis').closest('div.widget-content').addClass('social-sidebar');

Or:

$('.ifthis').closest('.widget-content').addClass('social-sidebar');
//if only a elements have .ifthis and only div elements have .widget-content

Or:

$('.widget-content:has(.ifthis)').addClass('social-sidebar');

Ref: https://api.jquery.com/closest/
https://api.jquery.com/has-selector/

.closest( selector ) -- Returns: jQuery

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

:has() Selector

jQuery( ":has(selector)" ) -- Returns: jQuery

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

Collectives™ on Stack Overflow

Add class to parent div if there has specific class

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related