style each div with a different color using jquery or javascript
<p>I have a home page with <code>ul li div</code> 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.</p>

<p>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.</p>

<p>This is how i could start?:</p>

<pre><code>$("div.box").css({"background-color": "color"});
</code></pre>

<p>Here is my example cut down markup:</p>

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

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

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

<p>This is the css:</p>

<pre><code>       .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%;

    }
</code></pre>
