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

它保持不变，一切都没有变化......但它被移除了，这意味着它被插入到完全相同的位置，因此如果我正在执行以下操作它会起作用 - 我的解决方案：

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

但我真的不知道为什么......新元素应该在索引处，之前应该在索引之前插入它... 如果有人知道请回答我很乐意接受答案： - ）

...

好吧，自己弄明白并回答，抱怨骚动，但也许其他一些人也不知道，并且和我一样思考： - ）

Answer 1

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

Answer 2

通过删除元素，下一个而不是前一个元素获取索引，因此它将被插入到相同的位置。它适用于after()，因为获取新索引的元素位于“正确方向”，因此它适用于以下内容：

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

只是一个逻辑上的错误......在适当的思考之后解决了： - ）

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

2 个答案: