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/

动态添加nth-child类

2 个答案: