如果第四个父级有类，则将类添加到 DIV

Question

我正在开发一个网站，其中有包含文本文章和图像的 DIV(所有这些 DIV 都有按类.article(。 我正在使用一个库来检测元素何时滚动到视口中并对其进行动画处理，并在此过程中将类.aos-animate添加到元素中。

所有.article内部都有一个 DIV，带有 id#divider和类.dv。这样的div 只是一条带有填充颜色的扁平水平线，它仅用于设计，默认情况下它的宽度为 0px。

我想做的是以某种方式检查.article是否具有类.aos-animate，如果有，则定位该.article中包含的#divider并添加类.dv-expand(这会将 #divider 的宽度设置为 100px。这只是一个不错的动画功能(。

我首先尝试了这个，在页面滚动时触发：

if ($('.article').hasClass('aos-animate')) {
$('.dv').addClass('dv-expand');
}

但是，这会将.dv-expand类应用于文档中的所有.dv。 那么，有没有办法迭代一个函数来扫描所有.articles并在找到一个具有类.aos-animate然后选择该 DIV 的函数时停止，找到其 id#divide(或类.dv(的子元素并对其应用一个类？

顺便说一下，这是我文档中.article的样子：

<!-- Article 1 -->
<div id="at-1" class="article" data-aos="fade-up" data-aos-anchor-placement="top-center"> <!-- THIS IS THE DIV TO CHECK FOR AOS-ANIMATE CLASS -->
<div id="tx-c-g">
<div id="c-title">
<p id="t-1" class="title">LOREM IPSUM DOLOR</p>
</div>
<div id="c-subset">
<div id="c-span">
<div id="divider" class="dv"></div> <!-- THIS IS THE DIV TO addClass('dv-expand') -->
</div>
<div id="c-plain" class="at-padd">
<p id="pl-1" class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
<!-- Article 1 End -->

我目前每页有 10 篇文章，但它们都有相同的 HTML，只是文本内容发生了变化。

抱歉，如果标题不够具体，我没有找到描述这种情况的简短方法。

Answer 1

根据我的理解，您也不需要if条件，只需将您的代码更改为

$('.article.aos-animate .dv').addClass('dv-expand');

Answer 2

您想尝试在 .each 函数中执行该代码。 以便它仅适用于传递特定条件的 match 元素。

var article =  $('.article');
$(article).each(function(){
if($(this).hassClass('aos-animate')){
$(this).find('.dv').addClass('dv-expand');
}else{
//optional if you want to remove class
}
})