1

クラスを動的に追加する必要があります（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/

4

2 に答える 2

3

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/

于 2013-01-01T21:07:56.650 に答える
1

質問を理解したので、次の方法があります。

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

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

于 2013-01-01T20:59:43.380 に答える