jQuery - before（）和after（）的不同行为

Question

我有一个可排序的列表（不是通过简单点击按钮就可以排序的jQuery UI）。 通过after()排序到正确的作品很好，但排序到before()左侧不起作用。

首先代码：

的Html

PhotoList：

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

可选列表：

（绝对定位在照片）

<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

绑定功能

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

功能

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

如果right为真或.ArrowRight被点击，它正常工作。该项目被删除并在右侧插入一个位置。 正如你所看到的，我登录index来检查else语句是否被执行，以及索引是否正确。是的，else语句被执行，索引也是正确的。 before()与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); 
} 

而且它保持不变，没有什么变化可言......但它是删除，这意味着它插在完全相同的位置，therfore它的工作原理，如果我做了以下 - 我的解决方案 ：

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

但我真的不知道为什么......新的元素应该是指数，和前指数前，应插入... 如果有人知道请回答，我会欣然接受的答案:-)

...

好了，想通了由我回答，抱歉的骚动，但也许其他一些人不知道，以及在相同的方式，我都在思考:-)

Answer 1

通过去除下一个元素而不是前一个元素获取索引，所以它将被插入到相同的位置。 它与after()因为获得新指数的元素是“正确的方向”，因此它具有以下工作：

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

只是一个合乎逻辑的错误......之后appropiate思维解决:-)

Answer 2

photo.remove();实际上从树中删除了dom元素，所以我认为索引不匹配。尝试使用之前/之后不删除，只是移动元素。