我想打破列表中的每三个项目,并为那个孩子添加一个类;
<ul>
<li>1</li>
<li>2</li>
<li>3</li><!--target list item-->
<li>4</li>
<li>5</li>
<li>6</li><!--target list item-->
<li>7</li>
</ul>
任何的想法?
我想打破列表中的每三个项目,并为那个孩子添加一个类;
<ul>
<li>1</li>
<li>2</li>
<li>3</li><!--target list item-->
<li>4</li>
<li>5</li>
<li>6</li><!--target list item-->
<li>7</li>
</ul>
任何的想法?
您应该使用 nth-child 伪选择器
$("ul li:nth-child(3n)").addClass("break-here");
有一个 CSS 伪选择器:
:nth-child(xn+y)
选择从 开始的每个x
孩子y
,因此在您的情况下x = 3
和y = 1
(默认值)
$('li:nth-child(3n)').addClass(...);
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li><!--target list item-->
<li>4</li>
<li>5</li>
<li>6</li><!--target list item-->
<li>7</li>
</ul>
<script type="text/javascript">
i = 0;
$.each($("li"), function(key,value) {
i++;
if (i % 3 == 0) {
//Do things
}
})
</script>
$("li").each(function(index,item){
console.debug(index)
if(index % 3 == false){
$(this).addClass("newClass");
}
})
这将是诀窍
另一种没有伪选择器的解决方案
collection.each(function(i, item){
if(! i%3) {
$(item).addClass('c');
}
});
$('ul li').each(function(i,e){
$(e).eq((i+1)%3).addClass('red');
});