使用jQuery遍歷顏色數組

Question

我試圖給每個div不同的背景色。 這是我當前的代碼：

http://jsfiddle.net/Uy2FX/2/

var imgColours = ['#FCCF94', '#C4C9E5', '#ADE3D6'];

for (i=0; i < imgColours; i++) {
        $('.img').css({backgroundColor: imgColours[0]});
}

但是，我不確定這哪里出錯了。 我知道這可能太簡單了，但是在我看來這很有意義。 有人可以指出我正確的方向嗎？

Answer 1

您的代碼中存在一些相關的錯誤。

這可能是您想要做的：

// V1 : Basic
var imgColours = ['#FCCF94', '#C4C9E5', '#ADE3D6'];
for (var i=0; i < imgColours.length; i++) {
    $('.img:eq('+i+')').css({backgroundColor: imgColours[i]});
}

但是，如果您想從數組中獲取任意數量的div的隨機顏色，並且還要對jQuery代碼進行一些優化以獲得更好的性能：

// V2 : random colors
var $imgs = $('#boxes1').find('.box'),
    imgsCount = $imgs.length,
    coloursCount = imgColours.length;

for (var i=0; i < imgsCount; i++) {
    var rnd = Math.floor(Math.random() * coloursCount),
        color = imgColours[rnd];
    $imgs.eq(i).css({backgroundColor: color});
}

或者，如果要按照數組的順序遍歷顏色，只需更改循環即可：

// V3 : sequential colors
// Add V2 variables here

for (var i=0; i < imgsCount; i++) {
    var color = imgColours[i%coloursCount];
    $imgs.eq(i).css({backgroundColor: color});
}

更新內容： http : //jsfiddle.net/Uy2FX/12/

有關jQuery選擇器性能的一些非常基本的技巧， 請訪問 ： http : //www.sitepoint.com/efficiency-jquery-selectors/

Answer 2

您需要使用imgColours.length

for循環不知道數組多長時間

編輯：如果最終還是使用imgColours[0]在此for循環中有什么imgColours[0]呢？ 如果要循環每種顏色，請使用i而不是0 。

無論哪種方式，這不會導致每個div擁有不同的背景。

嘗試按className進行選擇（我將使用vanilla.js，因為它很簡單）

var elements = document.getElementsByClassName("img");
for (var i = 0; i<elements.length; i++) {
    var color = imgColours[Math.floor(Math.random()*imgColours.length)]; //get a RANDOM color change me if needed
    elements[i].style.backgroundColor = color;
}

Answer 3

您始終將imgColours[0]分配給每個div。 我認為您正在尋找的是imgColours[i]

您還需要使用imgColours.length來告知循環數組的長度。

您還將獲取img類的所有HTML元素，因此這將每次都更改它們。

要分別獲取每個元素，可以使用CSS nth-of-type選擇器。 基本上你可以做這樣的事情

$(".img:nth-of-type(" + i + ")")

Answer 4

這個怎么樣？

var ec = 0;
var i = 0;
for(ec; ec < elements.length; ec++, i++) {
   elements[ec].style.backgroundColor = imgColours[i];

    if(i == (imgColours.length - 1)) i = -1;

}

http://jsfiddle.net/y2dq3/