title: How to iterate a unique class in jQuery?
body: <p>I have this list,</p>
  
  <pre><code>&lt;ul id="list"&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
    &lt;li&gt;Item 4&lt;/li&gt;
    &lt;li&gt;Item 5&lt;/li&gt;
    &lt;li&gt;Item 6&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And I want to dynamically add a class to it and will result to something like this,</p>
  
  <pre><code>&lt;ul id="list"&gt;
    &lt;li class="class-1"&gt;Item 1&lt;/li&gt;
    &lt;li class="class-2"&gt;Item 2&lt;/li&gt;
    &lt;li class="class-3"&gt;Item 3&lt;/li&gt;
    &lt;li class="class-4"&gt;Item 4&lt;/li&gt;
    &lt;li class="class-1"&gt;Item 5&lt;/li&gt;
    &lt;li class="class-2"&gt;Item 6&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's my initial code,</p>
  
  <pre><code>jQuery(function(){
    var list = jQuery('#list').children('li');
    var arr = ['class-1','class-2','class-3','class-4'];
    jQuery.each(arr, function(index, el) {
      list.addClass(el);
    });
  });
  </code></pre>
  
  <p>But all it did is to add all the classes on each list item. I guess I really don't know what I'm doing here. I'd really appreciate if someone can point me in the right direction. </p>