Jquery 错误地按 id 对 <li> 进行排序答案

【问题标题】：Jquery incorrectly sort <li> by idJquery 错误地按 id 对 <li> 进行排序
【发布时间】：2015-02-14 13:08:54
【问题描述】：

我有这个 <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> 没有排序不正确，是什么原因造成的？

【问题讨论】：

标签： javascript jquery html arrays sorting

【解决方案1】：

问题是您没有正确实现sort 函数。该函数应该返回一个正数、负数或零；你返回的是真/假。

因此，当 a.id 小于/等于 b.id 时，函数返回 false，它是零值；被视为 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");

【讨论】：

【解决方案2】：

假设你没有两次相同的数字，你可以使用这个：

return (parseInt(a.id.replace('member_', '')) > parseInt(b.id.replace('member_', ''))) ? 1 : -1;

Salman A 答案适用于所有情况。

sort() 期望值 1,0,-1 作为返回值：Array.prototype.sort()，因此您不应使用 > 符号。

【讨论】：