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保留与该元素关联的任何事件。然后，您可以使用自定义排序功能来比较每个id元素的li属性。

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

查看示例小提琴here。点击事件附加到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);

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

4 个答案: