title: how do i Loop .next()?
body: <p>I have 3 divs with same class, i am adding class 'selected' to NEXT DIV on click and removing it from previous class, its working fine but I want to loop it</p>
  
  <p>Currently its going from 1 --> 2 --> 3, I want it to loop, 3-->1, please help...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="all"&gt;
  &lt;div class="section selected"&gt;ONE&lt;/div&gt;
  &lt;div class="section"&gt;TWO&lt;/div&gt;
  &lt;div class="section"&gt;THREE&lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;a href="javascript:;" id="button"&gt;CLICK&lt;/a&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.selected{background:red}
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('#button').click(function(){
      $('.section.selected').removeClass('selected').next('.section').addClass('selected'); 
  });
  </code></pre>
  
  <p>JS Fiddle Link : <a href="http://jsfiddle.net/madhuri2987/KK66g/2/">http://jsfiddle.net/madhuri2987/KK66g/2/</a></p>