title: accessing current item on .each()
body: <p>i have the following code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="step-holder"&gt;
      &lt;div class="step-no"&gt;1&lt;/div&gt;
      &lt;div class="step-dark-left"&gt;&lt;a href="#"&gt;Basic details&lt;/a&gt;&lt;/div&gt;
      &lt;div class="step-dark-right"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="step-no-off"&gt;2&lt;/div&gt;
      &lt;div class="step-light-left"&gt;&lt;a href="#"&gt;SEO&lt;/a&gt;&lt;/div&gt;
      &lt;div class="step-light-right"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="step-no-off"&gt;3&lt;/div&gt;
      &lt;div class="step-light-left"&gt;&lt;a href="#"&gt;Preview&lt;/a&gt;&lt;/div&gt;
      &lt;div class="step-light-round"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$('#step-holder a').click(function (e) {
      e.preventDefault();
      $(this).parent('.step-light-left').each(function () {
          $(this).removeClass('.step-light-left').addClass('.step-dark-left');
      });
  });
  </code></pre>
  
  <p>but the second <code>$(this)</code> (inside the <code>.each</code>) still reffers to the original <code>$(this)</code>.
  so, it does not work.</p>
  
  <p>how can this be acheieved ? i dont understand why the second <code>$(this)</code> does not refer to the <code>.each()</code> current item.</p>
  
  <p>or maybe, if you have another solution to change all <code>step-light-left</code> to <code>step-light-right</code> and the other way around.</p>
  
  <p>what i need to do is turn off all the 'non-clicked' divs and turn on the clicked one.</p>