styliser chaque div avec une couleur différente à l'aide de jquery ou de javascript

Question

J'ai une page d'accueil avec ul li div La div est une boîte carrée et j'ai 3x3 en haut. La partie inférieure de mon site est un balisage généré par le code et j'ai quelque chose de similaire.

J'aimerais donner une couleur à chaque div "box", actuellement elles sont toutes stylisées avec css. Il y a un moyen avec jquery de vérifier pour ul li div et si la div existe alors ajouter une couleur DIFFERENTE au style en ligne ? J'aurais besoin de stocker les couleurs dans le script.

C'est ainsi que je pourrais commencer ?

$("div.box").css({"background-color": "color"});

Voici mon exemple de balisage réduit :

<ul>
<li data-target="aboutme" data-target-activation="click" style="margin-top:0px" class="tile high me">
          <div>
          <h2>About Me</h2>
        <h3></h3>
         <img width="48" height="48" alt="" class="icon" src="images/icons/x.png">
     </div>
</li>

<li data-target="aboutme" data-target-activation="click" style="margin-top:0px" class="tile high me">
          <div>
          <h2>Pane 2</h2>
        <h3></h3>
         <img width="48" height="48" alt="" class="icon" src="images/icons/x.png">
     </div>
</li>

<li data-target="aboutme" data-target-activation="click" style="margin-top:0px" class="tile high me">
          <div>
          <h2>Pane 3</h2>
        <h3></h3>
         <img width="48" height="48" alt="" class="icon" src="images/icons/x.png">
     </div>
</li>
</ul>

Voici la css :

       .tiles {
        height: 95%;
        margin: 0 auto;
        min-height: 950px;
        overflow: visible;
        padding: 10px;
        width: 957px;
    }

    .tile.high {
    float: left;
        height: 200px;
        margin-top: -100px;
        padding-left: 10px;
        width: 23.6%;
    }

    li.tile div {
        background-color: #00ABA9;
    }

    .tile div {
        background-repeat: no-repeat;
        height: 100%;
        margin: 10px 10px 0;
        overflow: hidden;
        width: 100%;

    }

Answer 1

Bouclez les div's et utilisez une couleur différente pour chacune d'entre elles :

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

Vérifier en ligne : http://jsfiddle.net/4NVRQ/

Answer 2

var 

color = function(){
    return '#' + Math.floor(Math.random()*16777215).toString(16);
},
$els = $('div.box'),
colorify = function(els){
    els.each(function(){
        $(this).css('backgroundColor', color());
    });
};

colorify($els);