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 loop”和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

以下是您的操作：

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

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

如果你跳过将“this”转换为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";
}

Answer 3

尝试background-color而不是background，这是其他多个CSS规则的简写。

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

循环jquery对象

3 个答案: