更改随机jQuery的背景颜色重复顺序？

Question

使用下面的代码目前分配随机背景颜色：

// Add random background color to tiles 
var colors = ["#F2B036","#10AF70","#2A82AF","#68B0BB", "#6B7889"]; 
var rand = function() { 
       return Math.floor(Math.random()*5); 
      }; 
var randomColor = function() { 
        var x = colors[rand()]; 
        return x; 
      }; 

$(".ThumbnailMenuItem").each(function() { 
    $(this).css("background-color", randomColor()); 
}); 

不过，我不希望这是随机的，因为它的颜色会时而出现紧挨彼此。

我如何调整这个，以便它使用的颜色排列顺序，但在零位重新开始，如果有更多的ThumbnailMenuItem班比在阵列中的颜色？

Answer 1

您可以简单地用一个计数器和更新。

var i = 0; 
$(".ThumbnailMenuItem").each(function() { 
    $(this).css("background-color", colors[i++]); // increment here 
    if(i == 5) i = 0; // reset the counter here 
}); 

Answer 2

我建议：

var colors = ["#F2B036","#10AF70","#2A82AF","#68B0BB", "#6B7889"]; 
 

 
// iterating over each of the elements returned by the selector, 
 
// with the css() method, using the first argument (the index 
 
// of the current element in the collection) of the anonymous function: 
 
$(".ThumbnailMenuItem").css("background-color", function (index) { 
 
    // returning the modulus of the index against the length 
 
    // of the array of colours: 
 
    return colors[index%colors.length]; 
 
});

li { 
 
    height: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="ThumbnailMenuItem"></li> 
 
    <li class="ThumbnailMenuItem"></li> 
 
    <li class="ThumbnailMenuItem"></li> 
 
    <li class="ThumbnailMenuItem"></li> 
 
    <li class="ThumbnailMenuItem"></li> 
 
    <li class="ThumbnailMenuItem"></li> 
 
    <li class="ThumbnailMenuItem"></li> 
 
    <li class="ThumbnailMenuItem"></li> 
 
    <li class="ThumbnailMenuItem"></li> 
 
    <li class="ThumbnailMenuItem"></li> 
 
</ul>

参考文献：

• 的JavaScript：
  • modulo (%) operator。
• 的jQuery：
  • css()。