Jquery错误地按id排序<li>

Question

我有这个<li>按ID排序:

<ul id="members-list">
   <li id="member_8">
   <li id="member_4">
   <li id="member_7">
   <li id="member_12">
   <li id="member_11">
   <li id="member_13">
   <li id="member_5">
   <li id="member_6">
   <li id="member_9">
   <li id="member_3">
   <li id="member_2">
   <li id="member_1">
   <li id="member_10">
</ul>

我使用的代码:

<script>
$( document ).ready(function() {
    $("li[id*='member_']").sort(function (a, b) {
        return parseInt(a.id.replace('member_', '')) > parseInt(b.id.replace('member_', ''));
    }).each(function () {
        var elem = $(this);
        elem.remove();
        $(elem).appendTo("ul#members-list");
    });
});
</script>

结果是:

<ul id="members-list">
   <li id="member_5">
   <li id="member_8">
   <li id="member_7">
   <li id="member_1">
   <li id="member_2">
   <li id="member_3">
   <li id="member_4">
   <li id="member_6">
   <li id="member_9">
   <li id="member_10">
   <li id="member_11">
   <li id="member_12">
   <li id="member_13">
</ul>

该<li>是没有不正确排序,是什么导致问题？

Answer 1

问题是您没有sort正确实现该功能.该函数应该返回正数,负数或零; 你回来是真假.

所以当a.id小于/等于b.id时,函数返回false,即0-ish; 被视为a.id的等于b.id ; 这使得排序功能脱离了轨道.

解决方案是改变这个:

return parseInt(a.id.replace('member_', '')) > parseInt(b.id.replace('member_', ''));

对此:

return parseInt(a.id.replace('member_', '')) - parseInt(b.id.replace('member_', ''));

说了这么多,您可以使用detach以下单个代码重写代码appendTo:

$("li[id*='member_']").detach().sort(function(a, b) {
    return +a.id.replace("member_", "") - b.id.replace("member_", "");
}).appendTo("ul#members-list");