title: jQuery each: run through each set of a li individually
body: <p>I don't even know how to explain my problem - that's where the weird title comes from.
  I have a <code>ul</code> wrapping another <code>ul</code> like the sample underneath.</p>
  
  <pre><code>&lt;ul class="event-items"&gt;
     &lt;li class="year 2012"&gt;&lt;/li&gt;
     &lt;li class="year 2011"&gt;&lt;/li&gt;
     &lt;li class="year 2010"&gt;
        &lt;ul&gt;
           &lt;li&gt;&lt;/li&gt;
           &lt;li&gt;&lt;/li&gt;
           &lt;li&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
  &lt;li class="year 2010"&gt;&lt;/li&gt;
  …
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/gwl84.png" alt="enter image description here"></p>
  
  <p>So each <code>li.year</code> has another <code>&lt;ul&gt;</code> with multiple children inside.</p>
  
  <p><strong>Now my problem:</strong></p>
  
  <p>I wonder how I can run through <code>each</code> <code>li.year</code> individually.</p>
  
  <p>Right now I'm doing this …</p>
  
  <pre><code>$('ul.event-items li.year ul li').each(function(i) {
      if ( i % 4 == 0 ) $(this).addClass('clearLeft');
  });
  </code></pre>
  
  <p>However this <code>each</code> loop runs through a ALL <code>&lt;li&gt;</code>s. I wonder how I can run through each <code>li:year li</code> individually. Sounds weird right?</p>
  
  <p>So I actually want to loop through each of <code>li.year</code> individually so that my <code>i</code> count always starts fresh inside each <code>li.year</code></p>