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 .

Answer 1

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,

1. has() will only check that it's descendant has contain that selector, you need filter() instead.
2. 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'); 

Answer 2

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.