如果4th-parent hasClass將類添加到DIV

我正在開發一個網站，其中包含文本文章和圖像的DIV（所有這些DIV都有類.article）。我正在使用一個庫來檢測一個元素何時滾動到視口中，並在該過程中爲其添加了動畫，並將類.aos-animate添加到元素中。如果4th-parent hasClass將類添加到DIV

所有.article s內都有一個DIV，其編號爲#divider和.dv。這樣的div只是一個帶有填充顏色的平坦水平線，它只是用於設計，默認情況下它的寬度爲0px。

我想什麼做的，就是莫名其妙地檢查如果.article有類.aos-animate，如果它有它，然後瞄準載有.article內#divider並添加.dv-expand類（這將設置#divider的寬度到100px。這只是一個不錯的動畫功能）。

我想這首先，觸發頁面滾動：

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

然而，在文檔中應用的.dv-expand類ALL .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，只有文本內容的變化。

對不起，如果標題不夠具體，我沒有找到一個簡短的方式來描述這種情況。

來源

2017-08-01 Thomas White

按我的理解，你不需要if條件也只是改變你的代碼

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

來源

2017-08-01 04:39:00

謝謝，的確，它就像使用這些特定的選擇一樣簡單。 –

您想嘗試在每個函數中執行該代碼。所以它只適用於通過一定條件的匹配元素。

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 
    } 

})

來源

2017-08-01 04:35:11

如果4th-parent hasClass將類添加到DIV

回答

相關問題