Question

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

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

我想做的是检查一个.article是否有.aos-animate类，如果它有，那么请定位#divider内的.article并添加Class .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

你想尝试在.each函数中执行该代码。所以它只适用于通过特定条件的匹配元素。

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
   }

})

Answer 2

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

即可

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

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

2 个答案: