在图案中使用四种颜色的不同背景颜色答案

【问题标题】：Different background colours using four colours in a pattern在图案中使用四种颜色的不同背景颜色
【发布时间】：2012-11-25 01:32:56
【问题描述】：

我有一组四种颜色，我想知道是否可以使用这四种颜色作为循环来更改图案中 div 的颜色。所以，例如：

div1 = 红色 div2 = 蓝色 div3 = 绿色 div4 = 黄色 [重新开始] div5 = 红色 div2 = 蓝色 div3 = 绿色...等等。

我认为 jQuery/JS 会是最好的。我尝试使用 nth-childs 等，但没有那么强大。

有什么帮助吗？

谢谢，回复

【问题讨论】：

标签： jquery css colors

【解决方案1】：

您只需使用 CSS 即可：

div:nth-child(4n+1) { background-color : red; }
div:nth-child(4n+2) { background-color : blue; }
div:nth-child(4n+3) { background-color : green; }
div:nth-child(4n+4) { background-color : yellow; }

演示：http://jsfiddle.net/RLmgD/

但如果你真的想要 jQuery：

$(document).ready(function() {
    $("div:nth-child(4n+1)").css("background-color","red");
    $("div:nth-child(4n+2)").css("background-color","blue");
    $("div:nth-child(4n+3)").css("background-color","green");
    $("div:nth-child(4n+4)").css("background-color","yellow");
});

演示：http://jsfiddle.net/RLmgD/1/

【讨论】：

@Adil - 这并不丰富多彩。 This 色彩斑斓...
是的，看起来不错。我希望我能放弃更多，因为流行音乐的 unshift，太棒了。
如果我们使用索引操作而不是 unshift 和 popup 会更有效吗？随着 unshift 和 pop 改变数组长度导致内存分配和释放？
@Adil - 我做了 unshift 和 pop 的事情，因为我想要一个简单的单线，但就效率而言，我认为这么小的阵列和 400 毫秒的间隔并不重要 - 清晰在代码中胜出。然而，在一个“真正的”实现中，我不会有四个 .css() 语句连续使用硬编码的数组索引，我会使用一个循环，并且可能会使用某种 jQuery 对象的缓存，一旦我有一个循环会更容易像你建议的那样进行索引操作。