在不丢失事件处理程序的情况下对元素列表进行排序

Question

我有 this 列表：

<ul>
    <li id="6">
        list 6: somethings
    </li>

    <li id="2">
        list 2: somethings
    </li>    

    <li id="4">
        list 4: somethings
    </li>    

    <li id="5">
        list 5: somethings
    </li>        

    <li id="0">
        list 0: somethings
    </li>    
</ul>

我想（使用 Javascript/jQuery）按 id 对这些元素进行排序（ASC ）保留每个元素的事件处理程序。

是否可以？我该怎么做呢？

Answer 1

您可以将 ID 分配到一个数组中并使用 sort()：

var a = [];
$("ul li").attr('id',function(i,e){
    a.push(e);
});
$.each(a.sort(),function(i,e){
    $("#"+e).appendTo('ul');
});

您永远不会从列表中删除它们，而只是移动它们。点击处理程序保持不变：

http://jsfiddle.net/niklasvh/nVLqR/

Answer 2

这应该可以正常工作。使用detach 保留与该元素关联的所有事件。然后，您可以使用自定义排序函数来比较每个 li 元素的 id 属性。

var ul = $("ul");
var li = ul.children("li");
li.detach().sort(function(a, b) {
   var compA = $(a).prop("id");
   var compB = $(b).prop("id");
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
});
ul.append(li);

请参阅此处的小提琴示例。单击事件附加到 ID 为“6”的li。列表重新排序后，仍会处理该单击事件。

Answer 3

我认为要订购它们，您必须将它们删除并添加回 DOM 中……因此您肯定会丢失事件处理程序。您是否可以控制处理程序，可以重新绑定或使用 live() 来代替吗？

另一种方法是绝对定位 li 元素并使用 css 位置属性（top、right、bottom , left) 来移动它们，这将使它们在 DOM 中保持相同的顺序，但按照您想要的顺序渲染它们。t

Answer 4

这个例子对我有用：

var mylist = $('.item').detach().sort(function (a, b) { 
    return $(a).find(selector).html() > $(b).find(selector).html();
});
$("#container").html(mylist);

或者如果你想与其他信息一起排序：

var mylist = $('.item').detach().sort(function (a, b) { 
    return $(a).find(selector).attr('data-title')() > $(b).find(selector).attr('data-title');
});
$("#container").html(mylist);