如果子级包含类，如何将类添加到父级

How can I add class to parent if child contains class?

本文关键字：添加 包含类 如果      更新时间：2023-09-26

如果父div有一个类为"testing"的子IMG元素，我将尝试向它添加一个类。

<article>
    <div id="on-1" class="box">
        <img src="110.jpg">
    </div>
    <div class="present">
        <img class="testing" src="image.jpg">
    </div>
</article>

我已经设置了if语句来检查类"testing"是否存在。不过，我在向父"article"元素添加类时遇到了问题。

if ($("article").find(".testing").length > 0) {
    $(.this.parentNode.parentNode).addClass("hasclass");
}

使用parent（）选择父元素。

$("article img.testing").parent().addClass('hasclass');


$("article img.testing").parent().addClass('hasclass');
.hasclass {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<article>
  <div id="on-1" class="box">
    <img src="110.jpg">
  </div>
  <div class="present">
    <img class="testing" src="image.jpg">
  </div>
</article>

$('div:has(img.testing)').addClass('hasclass');

根据您对@Tushar的回答的评论，为了帮助详细说明遍历许多父节点，我通常采取以下方法：

将类添加到直接父级div:

$('article img.testing').parent().toggleClass('new-class', true);

并将类添加到包含的article父级：

$('article img.testing').parents('article:first').toggleClass('new-class', true);

我也喜欢使用toggleClass()，因为它看起来"更干净"，以避免在元素中添加两次相同的类，尽管我相信jQuery会检查这一点。

希望这能有所帮助！

相关文章：