使用 jquery 应用不同的背景颜色

Question

我在父 div 中有一组子 div，子 div 是动态生成的，并且都具有相同的类名。

我的问题是如何使用 jquery 为每个子 div 应用不同的背景颜色 下面的示例代码

<div id="someid">
   <div class="bar">...</div>
   <div class="bar">...</div>
   <div class="bar">...</div>
   <div class="bar">...</div>
   <div class="bar">...</div>
</div>

这里我想为每个子 div 应用不同的背景颜色(class="bars")

提前致谢。

Answer 1

类似这样的：

var colors = ["f00", "0f0", "00f", "ff0", "0ff", "f0f"];

$('#someid .bar').each(function(i) {
   $(this).css('background-color', '#'+colors[i % colors.length]);
});

要产生随机颜色，你可以使用这个：

function randomColor() {
    return 'rgb('+
        Math.round(Math.random()*255)+', '+
        Math.round(Math.random()*255)+', '+
        Math.round(Math.random()*255)+')'
}

$('#someid .bar').each(function(i) {
   $(this).css('background-color', randomColor());
});

演示：

http://jsbin.com/eqoyi4

Answer 2

我猜问题已经回答了，但无论如何；如果您想显示特定颜色的阴影（本例中为#ffcc33）：

$(document).ready(function() {
    $('.bar').each(function(i) {
        var j = $('.bar').length;
        $(this).css('background-color', 'rgb(' + 
            Math.floor(0xff / j * (i + 1)) + ', ' + 
            Math.floor(0xcc / j * (i + 1)) + ', ' + 
            Math.floor(0x33 / j * (i + 1)) +
        ')');
    });
})

http://www.jsfiddle.net/BEcvG/

Answer 3

$('DIV.bar').each(function(i,e){
 $(this).css('backgroundColor','rgb('+Math.round(255/i)+','+Math.round(255/i)+','+Math.round(255/i)+')');
});