Добавить класс в родительский div, если существует определенный класс

Question

Попытка добавить класс к родительскому div <div class="widget-content">, если .widget-content li a имеет конкретный класс .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> 

Я попытался это:

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

Но не работает, см этот пример fiddle.

Answer 1

Выберите детей, которые имеют класс ifthis затем выберите его родителей, используя parents() или closest()

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

ИЛИ

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

Ваш код не работает, потому что,

1. has() только проверит, что у этого потомка есть этот селектор, вам нужно filter().
2. parent() будет выбрать только непосредственный родитель, так что вы должны использовать parents() или closest().

С код:

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

Answer 2

использовать это:

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

Или:

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

Или:

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

Ссылка: https://api.jquery.com/closest/
https://api.jquery.com/has-selector/

.closest (селектор) - возвращает: JQuery

Описание: Для каждого элемента в наборе, получить первый элемент, соответствующий селектор путем тестирования самого элемента и пересечения его предков в дереве DOM.

: есть() Селектор

JQuery (": есть (селектор)") - возвращает: JQuery

Описание: Выбирает элементы, которые содержат, по меньшей мере, один элемент, который соответствует указанному селектору.