CODEWITHSUNDEEP
javascriptjquery
SamiSalami
SamiSalami

Reputation: 667

jQuery - different behaviour of before() and after()

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 :-)

Upvotes: 0

Views: 252

Answers (2)

SamiSalami
SamiSalami

Reputation: 667

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 :-)

Upvotes: 0

Liviu T.
Liviu T.

Reputation: 23664

photo.remove(); actually removes the dom element from the tree so I think there is mismatching of indexes. Try using before/after without removing, that just moves the element.

Upvotes: 1

Related Questions