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="" class="ifthis"> <b>This Text Should Red</b></a>
</li>

<li><a href="" 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.

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./slycolor" class="ifthis"> <b>This Text Should Red</b></a>
</li>

<li><a href="https://www.facebook./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.

• javascript
• jquery
• html
• addclass

2 Answers 2

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'); 

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./closest/
https://api.jquery./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.