我有一个列表,我想在其中向每个第二个元素添加类,从第一个元素开始计算。
这是我的清单
<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');
添加"偶数"类没有问题,但是如何添加"奇数"类呢?我应该使用哪个选择器从第一个列表元素开始计数?
你可以像这样使用 jquery 的奇数和偶数选择器
$( ".timeline li:odd" ).addClass('odd');
$( ".timeline li:even" ).addClass('even');
对于您的要求,您需要首先奇数,然后像这样更改此jquery
。$( ".timeline li:odd" ).addClass('even');
$( ".timeline li:even" ).addClass('odd');
或者只是这个
document.body.querySelectorAll(".timeline li").forEach(function(node,i){
node.classList.add(i % 2?"even":"odd");
})
只需将prev()
方法添加到代码中:
$(".timeline li:nth-of-type(2n)").addClass('even').prev().addClass('odd');
.even{
color:red;
}
.odd{
color: orange;
}
<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>
你可以这样做:
遍历与".timeline li"匹配的元素,并添加正确的类,无论其索引是否偶数。
$(".timeline li").each((index, el) => $(el).addClass(index % 2 ? 'even' : 'odd'));
更改:
$(".timeline li:nth-of-type(2n)").addClass('even');
自:
$(".timeline li:nth-child(even)").addClass('even');
如果你只想设置元素的样式,你可以使用css来定位它们
.timeline li:nth-of-type(2n + 1) {
background: red;
}
.timeline li:nth-of-type(2n) {
background: blue;
}
You can add odd/even class like the below example.
$(document).ready(function() {
$('ul.listul li:even').addClass('even');
$('ul.listul li:odd').addClass('odd');
});
li.even {
color: #000;
}
li.odd {
color: red;
}
<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>