title: Moving list elements using up and down buttons in a circular way
body: <p>I have a unsorted list and each element can be moved up and down by clicking his up or down button. Witch is working fine.</p>
  
  <p>I would like this list to be circular. Ex : if the up button of line_1 is clicked line_1 moves at the end of the list or if the down button of line_3 is clicked line_3 moves at the beginning of the list.</p>
  
  <p>I have tried this but the first line won't move to the end of the list :</p>
  
  <pre><code>$('.up').click(
      function() {
          if ($(this).parent.is(':first'))
              $(this).parent.insertAfter($(this).parent.siblings().last());
          else
              $(this).parent.insertBefore($(this).parent.prev());
      }
  );
  </code></pre>
  
  <p>My list :</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;line_1
          &lt;button class="up"&gt;up&lt;/button&gt;
          &lt;button class="down"&gt;down&lt;/button&gt;
      &lt;/li&gt;
      &lt;li&gt;line_2
          &lt;button class="up"&gt;up&lt;/button&gt;
          &lt;button class="down"&gt;down&lt;/button&gt;
      &lt;/li&gt;
      &lt;li&gt;line_3
          &lt;button class="up"&gt;up&lt;/button&gt;
          &lt;button class="down"&gt;down&lt;/button&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and my jquery code :</p>
  
  <pre><code>$('.up').click(function () {
      $(this).parent().insertBefore($(this).parent().prev());
  });
  
  $('.down').click(function () {
      $(this).parent().insertAfter($(this).parent().next());
  });
  </code></pre>
  
  <p>How can I make the list circular ?</p>
  
  <p><a href="http://jsfiddle.net/ionmang20/ff8t9dqx/" rel="nofollow">Here is a JSFiddle example</a></p>