jQuery - different behaviour of before() and after()
<p>I have a sortable list (not jQuery UI sortable, just by a simple click on buttons).
Sorting to the right via <code>after()</code> works just fine, but sorting to the left with <code>before()</code> does not work.</p>

<p>First of all the code:</p>

<p><em>Html</em></p>

<p><strong>PhotoList:</strong></p>

<pre><code>&lt;ul class="PhotoList"&gt;
   &lt;li&gt;
       &lt;div class="ThumbWrapper"&gt;
           &lt;img src="images/img_testphoto.jpg" /&gt;
       &lt;/div&gt;
   &lt;/li&gt;
   [...more Elements...]
&lt;/ul&gt;
</code></pre>

<p><strong>Selectable List:</strong></p>

<p>(positioned absolutely over the photos)</p>

<pre><code>&lt;ul class="SelectablePolaroids"&gt;
  &lt;li&gt;
    &lt;div class="Selectable"&gt;
        &lt;div class="Tools"&gt;
            &lt;div class="ArrowLeft Tool"&gt;
            &lt;/div&gt;
            &lt;div class="Delete Tool"&gt;
            &lt;/div&gt;
            &lt;div class="ArrowRight Tool"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  [...more Elements...]
&lt;/ul&gt;
</code></pre>

<p><em>JS</em></p>

<p><strong>Bind functions</strong></p>

<pre><code>jQuery('.SelectablePolaroids .Selectable .ArrowLeft').live('click', function(){sortPolaroid(jQuery(this),0)});
jQuery('.SelectablePolaroids .Selectable .ArrowRight').live('click', function(){sortPolaroid(jQuery(this),1)});
</code></pre>

<p><strong>Function</strong></p>

<pre><code>function sortPolaroid(elm, right)
{
    var selectitem = elm.parents('li');
    var index = jQuery('.SelectablePolaroids').children().index(selectitem);
    var photo = jQuery('.PhotoList').children().eq(index);
    selectitem.remove();
    photo.remove();
    if(right)
    {
        jQuery('.SelectablePolaroids').children().eq(index).after(selectitem);
        jQuery('.PhotoList').children().eq(index).after(photo);
    }
    else
    {
        console.log(index);
        jQuery('.SelectablePolaroids').children().eq(index).before(selectitem);
        jQuery('.PhotoList').children().eq(index).before(photo);
    }
 }
</code></pre>

<p>If <code>right</code> is true or <code>.ArrowRight</code> was clicked, it works just as expected. The item is removed and inserted one position further to the right.
As you can see I logged <code>index</code> to check if the else statement is executed at all and whether the index is correct. And yeah the else statement is executed and the index is correct as well. Is <code>before()</code> working in another way than <code>after()</code> or am I just blind to another mistake?</p>

<p><strong>EDIT:</strong></p>

<p>I have also logged the index after <code>before()</code>.</p>

<pre><code>//...
else {
   console.log(index);
   jQuery('.SelectablePolaroids').children().eq(index).before(selectitem);
   console.log(jQuery('.SelectablePolaroids').children().index(selectitem));
   jQuery('.PhotoList').children().eq(index).before(photo);
}
</code></pre>

<p>And it stays the same, nothing changes at all... but it was remove, which means it is inserted at exactly the same position, therfore it works if I am doing the following - <strong>my Solution</strong>:</p>

<pre><code>//...
else {
    jQuery('.SelectablePolaroids').children().eq(index-1).before(selectitem);
    jQuery('.PhotoList').children().eq(index-1).before(photo);
}
</code></pre>

<p>But I don't really know why... the new element should be at the index, and before should insert it before index...
If someone knows please answer I will gladly accept an answer :-)</p>

<p>...</p>

<p>Okay, figured it out by myself and answered, sorry about the ruckus, but maybe some other people don't know as well and are thinking in the same way as me :-)</p>
