Apply different background color using jquery

Question

Hi, I have a collection of child div's inside the parent div,the child div's are generated dynamically and all has the same class name.

My question is how to apply different background color for each child div using jquery sample code below

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

Here i want to apply different background color for each child div( class="bars")

Thanks in advance.

Answer 1

Something like this:

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

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

To produce random colors, you can use this:

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());
});

Demo:

http://jsbin.com/eqoyi4

Answer 2

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

Answer 3

Question is already answered I guess, but anyway; if you want to display shades of a particular color (#ffcc33 in this example):

$(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/