Question

基本上我要做的就是这个

var arr = ["red","green","blue"];
$('.box').each(function() {
    $(this).addClass(Array Value Here)
});

我希望结果是这样的。

<div class"box red"></div>
<div class"box green"></div>
<div class"box blue"></div>
<div class"box red"></div>
<div class"box green"></div>
<div class"box blue"></div>
<div class"box red"></div>
<div class"box green"></div>
<div class"box blue"></div>

我该怎么做？总div的数量是未知的。

Answer 1

Modulo [%]是你的朋友：

var colours = ['red', 'green', 'blue'];
$('.box').each(function(index, element) {
  $(element).addClass(colours[index % colours.length]);
});

See fiddle

Answer 2

var arr = ['red', 'green', 'blue'],
i = 0,
len = arr.length;

$('.box').each(function(index, box) {
  console.log(box);
  $(box).addClass(arr[i]);
  ++i;
  if (i === len) {
    i = 0;
  }
});

Answer 3

     var arr = ['red', 'green', 'blue'];
      $('.box').each(function(i,o) {
         $(this).addClass(arr[i%arr.length]);
     });

Answer 4

如果你只是造型，你可以使用:nth-child来一起避免使用JS。

.box:nth-child(3n + 1) {
  color: red;
}

.box:nth-child(3n + 2) {
  color: green;
}

.box:nth-child(3n + 3) {
  color: blue;
}

如何使用.each函数将数组从数组添加到n个div？

4 个答案: