ループjqueryオブジェクト

Question

各divに背景色を割り当てようとしています。 シンプルに見えますが動作しません。

var divElements = $("div"); 
var colorArray =["444", "344", "345", "472", "837", "043", "345", "472", "837", "043"]; 

for (var i=0; i< divElements.length; i++){ 
divElements[i].css("background","#"+colorArray[i]) 
} 

私はまた、どのように "forループ" のJavaScriptのコードこのジェネリックとjQuerys .each（）

Answer 1

$("div").each(function(i, val) { 
    $(this).css("background", "#" + colorArray[i]); 
}); 

あなたはかかわらcolorArrayの限界を超えるために注意しなければならない（つまり、あなたはあまりにも多くのdivを取得する場合）。それらを介して

$("div").each(function(i, val) { 
    if (i > colorArray.length) { 
    return false; // breaks $.each() loop 
    } 
    $(this).css("background", "#" + colorArray[i]); 
}); 

またはサイクル：

$("div").each(function(i, val) { 
    $(this).css("background", "#" + colorArray[i & colorArray.length]); 
}); 

ないあなたはJavascriptとしてそれをやりたいと思いますなぜわからしかし：

var divElements = document.getElementsByTagName("div"); 
var colorArray =["444", "344", "345", "472", "837", "043", "345", "472", "837", "043"]; 
for (var i=0; i< divElements.length; i++){ 
    divElements[i].style.backgroundColor = '#' + colorArray[i]; 
} 

Answer 2

がある、background-color代わりのbackgroundを試すんjQueryの各

$("div").each(function(i) { 
    divElements[i].css("background","#"+colorArray[i]) 
}) 

を使用しようとしました他の複数のCSSルールの短縮形です。

divElements[h].css("background-color","#"+colorArray[h]) 

Answer 3

可能性は、あなたが最大のヒット時に停止含めますあなたのやり方は次のとおりです：

var colors = ["#444", "#344", etc.]; 

$("div").each(function (i) 
{ 
    $(this).css("background-color", colors[i]); 
}); 

あなたがそうのように、「この」jQueryオブジェクトに、ちょうどJavaScriptのネイティブAPIを使用して変換をスキップする場合は、小さな速度ゲインを得る可能性があります：

this.style.backgroundColor = colors[i]; 

また、デフォルトの色を割り当てることができます、あなたは、アレイ内のエントリよりも多くのDIV要素を持っている場合：

this.style.backgroundColor = colors[i] || "#fff"; 

ネイティブアプローチ：

var colors = ["#444", "#344", etc.], 
    divElements = document.getElementsByTagName("div"), 
    i = divElements.length; 

while (i) 
{ 
    // This is a reverse while-loop and runs a lot faster than other methods. 
    // This means that the first div element will get assigned the value of the 
    // last entry in the "colors"-array. If this breaks your brain, use the 
    // Array.reverse() function on the "colors"-array declaration :) 

    i--; 

    divElements[i].style.backgroundColor = colors[i] || "#fff"; 
}