0

我有一个可排序的列表（不是 jQuery UI 可排序的，只需单击按钮即可）。通过右侧排序可以after()正常工作，但左侧排序before()不起作用。

首先是代码：

html

照片列表：

<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为 true 或被.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);
}

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

...

好的，我自己想通了并回答了，对骚动感到抱歉，但也许其他一些人不太了解并且和我有同样的想法:-)

4

2 回答 2

1

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

于 2012-08-10T09:33:29.427 回答
0

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

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

只是一个逻辑错误......经过适当思考后解决:-)

于 2012-08-10T10:02:16.107 回答