1

リストを作成し、それぞれに異なるクラス名を追加しようとしています。現在、私はこの方法を使用しています：

HTML:

<ul class="sd-list">
   <li><a href="#">List Item 1</a></li>
   <li><a href="#">List Item 2</a></li>
   <li><a href="#">List Item 3</a></li>
</ul>

jQuery:

$('.sd-list:nth-child(1)').addClass('green');
$('.sd-list:nth-child(2)').addClass('red');
$('.sd-list:nth-child(3)').addClass('purple');

これは問題なく動作しますが、現在使用している方法よりも優れた方法があるかどうか疑問に思っています。どんな助けでも大歓迎です。

4

2 に答える 2

4

クラスを配列に入れることができます：

var colors = ['green', 'red', 'purple'];

$('.sd-list').each(function() {
    var index = $(this).index();
    if (index < colors.length) {
        $(this).addClass(colors[index]);
    }
});

リストがすべて同じ親の子であり、 ( 「親の n 番目の子」として真に使用するのではなく) その:nth-child(X)位置で要素を取得していて、各位置にクラスがある場合は、単純化することもできます。それは：X

$('.sd-list').addClass(function(index) {
    return colors[index];
});

しかし、私は Vlad に同意します。これは CSS で直接簡単に記述できます。

.sd-list:nth-child(1) {
    /* rules */
}
/* etc */
于 2013-01-28T23:19:15.993 に答える
1 
$(function () {

      $(".sd-list li").each(function(index) {
            $(this).attr("class", "color" + index);
      });

});
于 2013-01-28T23:19:15.027 に答える