Question

这是我应该创建的场景：

有OL的数字列表，（1,2,3,4,5,6）。用户可以选择/单击这些数字。当单击它时，该数字应该转到另一个OL列表（动画，数字飞越屏幕）。数字应始终按新列表中的有序顺序排列。因此，如果用户点击前5，它会复制并飞到新列表，如果用户然后点击数字1，它应该飞到5之前。所以...所以新的列表编号应该像1,3,5一样无论如何用户点击了哪个数字。

好的，这就是我想要实现的目标。基本上我可以做第一部分（用户点击数字 - ＆gt;它飞到新列表），但那么如何按顺序获取数字？

到目前为止，

JS：

$('ol#original li').click(function() {
        $(this).clone().appendTo('ol#newNumbers');

        $('ol#original:last').animate({
            left: "150px",
            position: "relative",
            top: "150px",
        }, 600);
    });

好的，我仍然存在将克隆的数字附加到相同的ol列表的问题：/

希望你理解并能帮助我。谢谢！

Answer 1

快速而简单的解决方案是在另一个<li>中创建一堆空<ol>，然后使用$.replaceWith()。另一个解决方案是为每个<li>提供一个维护排序顺序的数据属性。

（对于大多数情况，第一个选项应该没问题）

修改： http://jsfiddle.net/wA4ex/

/*create empty li's in newlist*/
for (var i=0; i < $('#oglist li').length; i++) {
    $('<li></li>').hide().appendTo($('#newlist'));
}

$('#oglist li').click(function(e) {
    var li = $(this),
        index = li.index(),
        clone = li.clone();
    $('#newlist li').eq(index).replaceWith(clone);
});

主要概念是使用占位符来维持秩序。

动画div并使用jQuery按数字排序

1 个答案: