Question

我有一个列表，我想在每个第二个元素中添加类，从第一个元素开始计算。

这是我的清单

<ul class="timeline">
  <span class="topbullet"></span>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
</ul>

我想这样：

<ul class="timeline">
  <span class="topbullet"></span>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
</ul>

这是我的jQuery代码

$(".timeline li:nth-of-type(2n)").addClass('even');

添加'偶数'类没有问题，但是如何添加'奇数'类？我应该使用哪个选择器来计算第一个列表元素？

Answer 1

你可以像这样使用jquery的奇数和偶数选择器

$( ".timeline li:odd" ).addClass('odd');
$( ".timeline li:even" ).addClass('even');

根据您的要求，您需要首先使用奇数，然后才能更改此jquery，如此

$( ".timeline li:odd" ).addClass('even');
$( ".timeline li:even" ).addClass('odd');

Answer 2

或者只是这个

document.body.querySelectorAll(".timeline li").forEach(function(node,i){
   node.classList.add(i % 2?"even":"odd");
})

Answer 3

你可以这样做：
迭代匹配＆＃34; .timeline li＆＃34;并添加正确的类，无论其索引是否均匀。

$(".timeline li").each((index, el) => $(el).addClass(index % 2 ? 'even' : 'odd'));

Answer 4

只需在代码中添加prev()方法：

＆＃13;

$(".timeline li:nth-of-type(2n)").addClass('even').prev().addClass('odd');

＆＃13;

.even{
  color:red;
}
.odd{
  color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="timeline">
  <span class="topbullet">Span</span>
  <li>Li</li>
  <li>Li</li>
  <div class="clearfix">Div</div>
  <li>Li</li>
  <li>Li</li>
  <div class="clearfix">Div</div>
  <li>Li</li>
  <li>Li</li>
  <div class="clearfix">Div</div>
  <li>Li</li>
  <li>Li</li>
  <div class="clearfix">Div</div>
  <li>Li</li>
  <li>Li</li>
  <div class="clearfix">Div</div>
</ul>

＆＃13;

Answer 5

变化：

$(".timeline li:nth-of-type(2n)").addClass('even');

为：

    $(".timeline li:nth-child(even)").addClass('even');

Answer 6

如果您只想设置元素样式，可以使用css

来定位它们

.timeline li:nth-of-type(2n + 1) {
    background: red;
}
.timeline li:nth-of-type(2n) {
    background: blue;
}

Answer 7

You can add odd/even class like the below example.

＆＃13;

$(document).ready(function() {
  $('ul.listul li:even').addClass('even');
  $('ul.listul li:odd').addClass('odd');
});

＆＃13;

li.even {
  color: #000;
}

li.odd {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="listul">
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
  <li>list4</li>
  <li>list5</li>
  <li>list6</li>
</ul>

＆＃13;

将Class添加到每个第二个元素，从第一个元素开始计数

7 个答案: