17370845950

本文详解如何使用 jquery 对 `.contest_entry` 元素进行多级排序：优先按 `span.points` 数值**降序**（高分在前），分数相同时再按 `span.times` 字符串**升序**（早时间在前），并提供可直接运行的完整代码与关键注意事项。

在实际前端开发中，仅按单一字段排序往往无法满足业务需求。例如竞赛排行榜需“先看得分高低，得分相同再比用时长短”——这正是典型的多条件复合排序场景。jQuery 本身不内置多字段排序方法，但可通过 Array.prototype.sort() 的比较函数灵活实现。

核心逻辑如下：

• 首先提取左右元素的 points 值（转为整数）；
• 若 points 不等，按降序排列（即 rhs - lhs）；
• 若 points 相等，则提取 times 文本（如 " 09:55 "），直接字符串比较即可——因时间格式统一为 HH:MM，字符串字典序与真实时间顺序一致（"09:55"
• 注意：原答案中误用了 .find(".child span.points")，而示例 HTML 中并无 .child 容器，应修正为 .find("span.points")。

以下是修复并优化后的完整可运行代码：

$(function() {
    var sortedList = $('.contest_entry').toArray().sort(function(lhs, rhs) {
        var lhsPoints = parseInt($(lhs).find('span.points').text().trim(), 10);
        var rhsPoints = parseInt($(rhs).find('span.points').text().trim(), 10);

        if (lhsPoints === rhsPoints) {
            // 时间字符串去空格后比较（HH:MM 格式支持直接字符串比较）
            var lhsTime = $(lhs).find('span.times').text().trim();
            var rhsTime = $(rhs).find('span.times').text().trim();
            return lhsTime > rhsTime ? 1 : -1;
        } else {
            return rhsPoints - lhsPoints; // 降序：高分在前
        }
    });

    $("#list").html(sortedList);
});

✅ 关键注意事项：

• 使用 .trim() 清除时间文本前后空格（如示例中的 " 09:55 "），避免字符串比较出错；
• parseInt(..., 10) 显式指定十进制，防止意外解析（如 "09" 被当作八进制）；
• 若未来需支持更复杂时间（含秒、毫秒或跨天），建议将 times 解析为 Date 或分钟数再比较；
• 排序后使用 .html() 重写容器内容，会销毁原有事件绑定，如需保留交互，请改用 .append() 或重新绑定事件。

最终排序结果将严格遵循：19分（17:19 → 17:20 → 17:34）→ 16分 → 14分，完全符合“高分优先、同分比快”的业务规则。