How to move an element to the third position with jquery?
<p>Please, help me with this. I have:</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;
    &lt;h2&gt;Headline for element 1&lt;/h2&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet quosque tandem.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;h2&gt;Headline for element 2&lt;/h2&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet quosque tandem.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;h2&gt;Headline for element 3&lt;/h2&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet quosque tandem.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;h2&gt;Headline for element 4&lt;/h2&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet quosque tandem.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;h2&gt;Headline for element 5&lt;/h2&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet quosque tandem.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And this is what I want to do:</p>

<ul>
<li>Every time you click on a list item, it moves to the center position (3rd position) and applies the class "active".</li>
</ul>

<p>I have this in jQuery:</p>

<pre><code>jQuery(document).ready(function(){

var third = $("ul li:eq(1)");

$("ul li").click(function() {
$("ul li").removeClass("active"); //Remove any "active" class
$(this).insertAfter(third);
$(this).addClass("active"); //Add "active" class to selected tab
});
});
</code></pre>

<p>But it doesn't work for the first and the second element.</p>
