Question

I have a sortable list (not jQuery UI sortable, just by a simple click on buttons).
Sorting to the right via after() works just fine, but sorting to the left with before() does not work.

First of all the code:

Html

PhotoList:

<ul class="PhotoList">
   <li>
       <div class="ThumbWrapper">
           <img src="images/img_testphoto.jpg" />
       </div>
   </li>
   [...more Elements...]
</ul>

Selectable List:

(positioned absolutely over the photos)

<ul class="SelectablePolaroids">
  <li>
    <div class="Selectable">
        <div class="Tools">
            <div class="ArrowLeft Tool">
            </div>
            <div class="Delete Tool">
            </div>
            <div class="ArrowRight Tool">
            </div>
        </div>
    </div>
  </li>
  [...more Elements...]
</ul>

JS

Bind functions

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

Function

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);
    }
 }

If right is true or .ArrowRight 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 index 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 before() working in another way than after() or am I just blind to another mistake?

EDIT:

I have also logged the index after before().

//...
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);
}

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 – my Solution:

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

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 🙂

…

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 🙂

Answer 1

By removing the element the next and not the previous element gets the index, so it will be inserted into the same position.
It works with after() because the element getting the new index is in the “right direction”, therefore it works with the following:

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

Just a logical mistake… solved after appropiate thinking 🙂