jqueryを使ってカラーコードを動的に増やす

Question

リストがあり、li：nth child cssではなく、rgbカラーコードを使用してカラーコードを動的に増やそうとしています。

$(document).ready(function(){ 
 
var items = $('#navigation li'); 
 
var colorCode =0; 
 
items.each(function (i, e) { 
 
    colorCode++; 
 
    alert(colorCode) 
 
    $(this).css("background-color", "rgb("+colorCode + "," + colorCode + "," + colorCode + ")"); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul id="navigation"> 
 
    <li> 
 
    hello 
 
    </li> 
 
    <li> 
 
    hello123 
 
    </li> 
 
    <li> 
 
    hello345 
 
    </li> 
 
    <li> 
 
    hello456 
 
    </li> 
 
    </ul> 
 
</nav>

問題は、カウンタカラーコードが増加していることであるが、それは、すべてのLi要素の黒色を示します。

Answer 1

一部のブラウザdev toolsを使用して<li>の要素を見ると、色のスタイルがアルゴリズムに従って正しく設定されていることがわかります。色は黒色に似ています。

各色の部分に2つ以上を追加すると、色の変化が表示されることがわかります。

また、配列内の色を定義することもできます。関数は、定義したi-thの色を返します。色の値を手動で計算するよりも、見栄えの良い色を定義する方が簡単かもしれません。

$(document).ready(function(){ 
 
var items = $('#navigation li'); 
 
var colorCode =0; 
 
items.each(function (i, e) { 
 
    colorCode += 64; 
 
    $(this).css("background-color", "rgb("+colorCode + "," + colorCode + "," + colorCode + ")"); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul id="navigation"> 
 
    <li> 
 
    hello 
 
    </li> 
 
    <li> 
 
    hello123 
 
    </li> 
 
    <li> 
 
    hello345 
 
    </li> 
 
    <li> 
 
    hello456 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

私がコメントで言ったように、あなたは色を見るために多くの要素を必要としています。 CSSでないのはなぜ

$(document).ready(function() { 
 
    for(var i = 0; i < 255; i++) { 
 
     $('#navigation li').first().clone().appendTo('#navigation'); 
 
    } 
 

 
    var colorCode = 0; 
 

 
    $('#navigation li').each(function (i, e) { 
 
     colorCode++; 
 
     $(this).css("background-color", "rgb("+colorCode + "," + colorCode + "," + colorCode + ")"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul id="navigation"> 
 
     <li>hello</li> 
 
    </ul> 
 
</nav>