Question

我有这个代码示例：

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

现在我想知道如何通过javascript将一个类添加到article元素。例如：

第一篇文章添加课程“左”

第二篇文章添加课程“正确”

第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。

接下来是你应该使用id。它肯定是部分的逻辑属性，但它对于文章也是非常合乎逻辑的。但是如果你想用Javascript做这个，那么你应该首先得到section标签的句柄，例如：

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

接下来，您可以遍历该部分的childNodes，如：

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++;
    }
 }

通过javascript在html中添加类（奇数和偶数）？

3 个答案: