jQueryは要素を分割してクラスを追加します

Question

私のナビゲーション内でli要素を数え、それらを4つのクラスに分割して個々の境界線の色にしたいと考えています。

それは次のようになります。私は、動的にjQueryを使ってそれをしたい

もちろん

<ul> 
    <li class="red"></li> 
    <li class="yellow"></li> 
    <li class="green"></li> 
    <li class="blue"></li> 
    <li class="red"></li> 
    <li class="yellow"></li> 
    <li class="green"></li> 
    <li class="blue"></li> 
</ul> 

。

私が試してみた：

$('#navbar li').each(function(i) { 
    $(this).addClass('className-' + i); 
}); 

が、そのコード数私のUL内のすべての李要素..助けを

ありがとうございました！

Answer 1

これらのクラスを配列に格納することができます。&要素のインデックスの残りの部分に基づいて4つ（i％4）でクラスを割り当てます。

var classNames=['red','yellow','green','blue']; 
 
$('li').each(function(i) { 
 
    $(this).addClass(classNames[i%4]); 
 
});

.red{ 
 
    color:red; 
 
    } 
 
.yellow{ 
 
    color:yellow; 
 
    } 
 
.green{ 
 
    color:green; 
 
    } 
 
.blue{ 
 
    color:blue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight</li> 
 
    <li>Nine</li> 
 
    <li>Ten</li> 
 
</ul>