javascript - 如果第 4 个父级 hasClass，则将类添加到 DIV

Question

我正在开发一个网站，其中有包含文本文章和图像的 DIV(所有这些 DIV 都具有 .article 类)。 我正在使用一个库，该库可以检测元素何时滚动到视口(viewport)并为其设置动画，在此过程中，它将类 .aos-animate 添加到该元素。

所有 .article 中都有一个 id #divider 和 class .dv 的 DIV。这样的div只是一 strip 有填充颜色的水平线，它只是为了设计而存在，默认宽度为0px。

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

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

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

但是，这将 .dv-expand 类应用于文档中的所有 .dv。 那么，有没有一种方法可以迭代一个函数来扫描所有 .articles 并在找到具有类 .aos-animate 的文章时停止，然后选择该 DIV，找到其子元素的 id #divide(或 class .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');