添加 class 到父级 div 如果有特定的 class

Question

尝试将 class 添加到父级 div <div class="widget-content"> 如果 .widget-content li a 具有特定的 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>

我试过这个：

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

但不起作用，请参阅此示例 fiddle。

Answer 1

Select children 其中有 class ifthis 然后 select 它是 parent 使用 parents() or closest()

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

或

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

您的代码无法正常工作，因为，

has() will only check that it's descendant has contain that selector, you need filter() 代替。
parent() 只会 select 立即 parent ，所以你应该使用 parents() or 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( 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() 选择器

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

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

添加 class 到父级 div 如果有特定的 class

Add class to parent div if there has specific class

html

javascript

jquery

addclass