Javascript 使用jQuery循环遍历颜色数组

我试着给每个部门一个不同的背景颜色。这是我目前的代码：

var imgColours=['FCCF94'、'C4C9E5'、'ADE3D6'；
对于（i=0；i

---

然而，我不太确定这是哪里出了问题。我知道这可能太简单了，无法工作，但在我看来这是有道理的。有人能给我指出正确的方向吗？

你需要使用

imgColours.length

for循环不知道数组的长度

编辑：如果您最终使用

imgColours[0]

的话，这个for循环有什么意义？如果要循环每种颜色，请使用

i

而不是

0

无论哪种方式，这都不会为每个div实现不同的背景

尝试按类名选择（我将使用vanilla.js，因为它很简单）

var elements=document.getElementsByClassName（“img”）；
对于（var i=0；i您总是将
imgColours[0]
分配给每个div。我认为您正在寻找的是
imgColours[i]

您还需要使用imgColours.length来告诉循环数组的长度

您还使用
img
类获取所有HTML元素，因此每次都会更改所有元素

要单独获取每个元素，可以使用CSS
nth类型选择器

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

您的代码中存在一些相关错误

这可能是您想要做的：

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

//V1:Basic
var imgColours=['#FCCF94'、'#C4C9E5'、'#ADE3D6']；
对于（变量i=0；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});
}

//V2：随机颜色
var$imgs=$（“#boxes1”）.find（“.box”），
imgsCount=$imgs.length，
colorsCount=imgColours.length；
对于（变量i=0；i

或者，如果要按照阵列顺序循环颜色，只需更改循环：

// 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});
}

//V3：顺序颜色
//在此处添加V2变量
对于（变量i=0；i

更新小提琴：

有关jQuery选择器性能的一些基本提示：
这个怎么样

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;

}

var-ec=0；
var i=0；
对于（ec；ec

i
可能应该是
i
和
{backgroundColor:imgColours[i]}
应该是
{“backgroundColor”：imgColours[0]}
。但即便如此，这种情况发生得太快了，你们只能看到最后一种颜色。啊，谢谢。我应该用什么来分别抓取每个img？@tmyie我用第n种类型的
selector更新了我的答案。谢谢。我有以下代码：我想让颜色穿过整个块数组，而不是在3之后停止。使用%运算符可以吗？（i%something.length）
// 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});
}

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;

}