4th-parent hasClassの場合にDIVにクラスを追加

Question

私は、テキスト記事と画像を含むDIVがあるWebサイトを開発しています（これらのDIVはすべてクラス.articleである）。 要素がビューポートにスクロールされてアニメーション化されたことを検出するライブラリを使用していますが、処理中に要素に.aos-animateクラスが追加されています。

ID #dividerとクラス.dvを持つ.articleのすべてにDIVがあります。このようなdivは、塗りつぶし色のある平らな水平線です。これはデザインのためだけにあり、デフォルトでは幅は0pxです。

私は何をしたい、.articleはクラス.aos-animateがあり、それはそれを持っている場合、その.article内部に含まれる#dividerをターゲットと#dividerの幅を設定しますどのクラス.dv-expandを（追加する場合、何とかチェックしています〜100px。これは素晴らしいアニメーション機能です）。

私は、ページのスクロールでトリガ、最初にこれを試してみました：

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

しかし、文書内のすべての.dv秒に.dv-expandクラスを適用しています。 だから、すべての.articlesをスキャンし、それがクラス.aos-animateを持っており、THEN 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

あなただけ

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

Answer 2

あなたはそのコードを各機能の内部で試してみてください。特定の条件を満たす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 
    } 

})