通過javascript在html中添加類（奇數和偶數）？

Question

我有這個代碼示例：

<section class="timeline">
    <article class="post ">
    <article class="post ">
    <article class="post ">
    <article class="post ">
</section>

現在我想知道如何通過 javascript 向文章元素添加一個類。 例如：

第 1 條添加類“左”

第 2 條添加類“正確”

第 3 條添加類“左”

第4條添加類“對”

Answer 1

我不確定你真的想做什么。我希望這會幫助你。

 let article = document.querySelectorAll('.post');
article.forEach((item, index) => {
    (index % 2 == 0) ?item.classList.add('odd'):item.classList.add('even')
});

Answer 2

我不確定您真正想要做什么，但很可能您不需要任何可以為奇數和偶數兒童編寫樣式的 javascript。

 .post:nth-child(odd) { color: green; } .post:nth-child(even) { color: red; }

 <section class="timeline"> <article class="post ">Article</article> <article class="post ">Article</article> <article class="post ">Article</article> <article class="post ">Article</article> </section>

Answer 3

Czlowiek 的答案在我看來是最好的答案，因為它不需要啟用 Javascript。

接下來是你應該使用 ids。 這對於部分來說當然是一個邏輯屬性，但對於文章來說也是非常合乎邏輯的。 但是，如果您想使用 Javascript 執行此操作，那么您是否應該首先處理 section 標簽，例如：

var sec = document.getElementById('timeline');

接下來，您可以遍歷該部分的 childNode，例如：

var cntArticle = 0;
for(var i = 0; i < sec.childNodes.length; i++) {
   if(sec.childNodes[i].tagName === 'ARTICLE') {
       if(cntArticle%2 === 0){
          sec.childNodes[i].className += ' left';
       } else {
          sec.childNodes[i].className += ' right';
       }
       cntArticle++;
    }
 }