2

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.

Ra.
  • 935
  • 4
  • 18
  • 30

3 Answers3

9

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

Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
  • 1
    I'd recommend a known pallette as well, here's one I use: `var colors = ["#5179D6", "#66CC66", "#EF2F41", "#FFC700", "#61BDF2", "#FF7900", "#7588DD", "#2F5E8C", "#07BACE", "#BAE55C", "#BA1871", "#FFFFCC", "#BDE6FC", "#C7C7C7", "#ADA8FF", "#2FA675"];`, visible here: http://jsfiddle.net/nick_craver/SzRee/ – Nick Craver Oct 11 '10 at 10:11
1

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/

Salman A
  • 262,204
  • 82
  • 430
  • 521
0
$('DIV.bar').each(function(i,e){
 $(this).css('backgroundColor','rgb('+Math.round(255/i)+','+Math.round(255/i)+','+Math.round(255/i)+')');
});
Floyd
  • 1,898
  • 12
  • 20
  • 1
    @Gaby: And `math` should be `Math`. And this does all divs that have class bar, regardless of where they are, and declares an argument it never uses. Then there's the divide-by-zero error. But other than *that*... – T.J. Crowder Oct 11 '10 at 10:00
  • 2
    what happens if `i` is zero? Divide overflow? – Salman A Oct 11 '10 at 10:01
  • 1
    @Salman: *"what happens if `i` is zero? Divide overflow?"* No, JavaScript has a special `Infinity` value for that situation. Still not going to be useful in the `rgb` call, though. :-) – T.J. Crowder Oct 11 '10 at 10:04
  • I have fixed the "literal error" .. Is stackoverflow a codeformy comunity or should it show one solution? 255 / 0 = 0, Math.round(0) = 0 -> rgb(0,0,0) ! – Floyd Oct 11 '10 at 10:10
  • i think everyone should have enough brain power to adapt to a possible solution for his purposes and not to blindly copy – Floyd Oct 11 '10 at 10:12
  • @Floyd, does not mean we have to make it harder for them though .. It is expected to update and correct your answer as well once things get pointed out.. (*negative votes usually are inverted when one correct the errors*). 255/0 = **Infinity** .. not 0 – Gabriele Petrioli Oct 11 '10 at 10:21