循環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]) 
} 

我也試着使用jQuery的每個

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

如何做這個代碼在JavaScript中通用的 「for循環」 和jQuerys。每（）

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，這是多個其他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"; 
}