每 4 个项目重复列表中的类答案

【问题标题】：Repetition of classes in the list every 4 items每 4 个项目重复列表中的类
【发布时间】：2013-12-03 06:34:22
【问题描述】：

我需要每列出 4 个项目创建一个类循环，如下所示：

<ul class="list">
 <li class="1">Element 1</li>
 <li class="2">Element 2</li>
 <li class="3">Element 3</li>
 <li class="4">Element 4</li>
 <li class="1">Element 5</li>
 <li class="2">Element 6</li>
 <li class="3">Element 7</li>
 <li class="4">Element 8</li>
<ul>

我正在使用下面的 jquery 代码来添加类：

jQuery(document).ready(function(){
  $(".list li").each(function(i) {
    $(this).addClass("color-" + (i+1));
  });
});

知道我能做什么吗？谢谢

【问题讨论】：

那么每 4 项应该有一个类？

标签： javascript jquery css loops

【解决方案1】：

试试这个：

jQuery(document).ready(function(){
  $(".list li").each(function(i) {
    var num = (i % 4) + 1;
    $(this).addClass("color-" + num);
  });
});

【讨论】：

【解决方案2】：

您需要使用% modulus operator

jQuery(document).ready(function(){
  $(".list li").each(function(i) {
    $(this).addClass("color-" + ((i%4)+1));
  });
});

jQuery 演示 http://jsfiddle.net/Ana3q/1

或者您可以完全避免使用 javascript，并使用 :nth-child() CSS selector

ul.list li:nth-child(4n+1){}
ul.list li:nth-child(4n+2){}
ul.list li:nth-child(4n+3){}
ul.list li:nth-child(4n+4){}

仅 CSS 演示 http://jsfiddle.net/Ana3q/

【讨论】：

【解决方案3】：

试试这个：http://jsfiddle.net/sU39B/

$(function(){
  i=0;
  $('.list li').each(function(){
    if(i==4) i=0;
    i++;
    $(this).addClass('color-'+i);
  });
});

【讨论】：

其他答案更好。这个很容易理解：D

【解决方案4】：

你可以使用选择器$(".list li:nth-child(4n)")

【讨论】：

OP 想要每个类一个，而不仅仅是第四个
每 4 个对象进行 4n 次选择。另外，如果您需要它从第 4 个元素开始（4n+4）
我知道，但我相信提问者希望以 4 个为一组来定位每个元素。所以 first/second/third/fourth/first/second/third/...

【解决方案5】：

我认为:nth-child 很适合这里

for (var i = 1; i <= 4; i++) {
    $('.list li:nth-child(4n + ' + i + ')').addClass(i + '')
}

演示：Fiddle

【讨论】：