style each div with a different color using jquery or javascript

Question

I have a home page with `ul li div` the div is a square box and i have 3x3 at the top. The bottom section of my site is code generated mark up and i have something similar. I would like to give each div "box" a color, currently they are all styled with css. Is there a way with jquery to check for ul li div and if the div exists then add a DIFFERENT colour to the inline style? I would need to store the colors in the script. This is how i could start?: ``` $("div.box").css({"background-color": "color"}); ``` Here is my example cut down markup: ```

About Me
Pane 2

Accepted Answer

Loop through div's and use different color on each:

```
// Declare colors you want to use
var myColors = [
    '#f00', '#abc', '#123'
];
var i = 0;
$('div.box').each(function() {
    $(this).css('background-color', myColors[i]);
    i = (i + 1) % myColors.length;
});
```

Check online: http://jsfiddle.net/4NVRQ/

style each div with a different color using jquery or javascript

Solution

Problem