title: style each div with a different color using jquery or javascript
body: <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>