如何使用数组在div上按顺序获取颜色

Question

我希望这些颜色按照给定的颜色顺序循环.但它给了我所有div上只有绿色.

var colors = ["red", "blue", "green"];
for (var i = 0; i < colors.length; i++) {
  $("div").each(function() {
    $("div").css({
      'background-color': colors[i]
    });
  });
}

HTML:

<div>A</div>
<div>B</div>
<div>C</div>

Answer 1

实际上,你可以简化你的代码,只是使用index从.each()方法.值得指出的是,.each()方法中传递的第一个参数是index,第二个参数是当前元素.

如果你有三个以上的项目,你也可以使用i % colors.length,以便在第三个索引之后的数组的开头回来.

更新的示例

var colors = ["red", "blue", "green"];
$("div").each(function(i) {
  $(this).css('background-color', colors[i % colors.length]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>