jquery - 动态添加第 n 个子类

Question

需要动态添加类（通过 jQuery）

<ul>
    <li class="green">Green</li>
    <li class="red">red</li>
    <li class="black">black</li>

    <li class="">Green</li>
    <li class="">red</li>
    <li class="">black</li>

    <li class="">Green</li>
    <li class="">red</li>
    <li class="">black</li>

</ul>

我的代码

jQuery('ul').each(function(){
                jQuery(this).find('li:nth-child(1n)').addClass('green');
                jQuery(this).find('li:nth-child(2n)').addClass('red');
                jQuery(this).find('li:nth-child(3n)').addClass('black');
  });

我在第一行添加了静态类（意味着前 3 li），需要与第一行相同的更多行您可以在此处使用 jQuery 演示 http://jsfiddle.net/WfKeY/

Answer 1

您应该每 3 个元素重复一次类，所以使用3n, 3n+/-1, 3n+/-2:

jQuery('ul').each(function(){
    jQuery(this).find('li:nth-child(3n-2)').addClass('green');
    jQuery(this).find('li:nth-child(3n-1)').addClass('red');
    jQuery(this).find('li:nth-child(3n)').addClass('black');
});​

更新演示：http: //jsfiddle.net/WfKeY/2/

Answer 2

现在我理解了这个问题，这里有一个替代方案：

var $li = $('ul > li');
$li.each(function(i) {
    $(this).addClass($li.eq(i%3).attr('class'));
});

http://jsfiddle.net/zaMUU/5/