jQuery 多条件排序：按分数降序、时间升序排列 div 元素

本文详解如何使用 jquery 对多个 `.contest_entry` div 进行多级排序：优先按 `span.points` 数值**降序**排列，分数相同时再按 `span.times` 字符串（如 "09:55"）**升序**排序，确保高分优先、同分者用时更短者靠前。

在实际前端开发中，仅按单一字段排序往往无法满足业务逻辑需求。例如竞赛排行榜需“先看得分（越高越好），得分相同再比耗时（越短越好）”。上述需求正是典型的多条件复合排序场景。

原代码仅基于 points 降序排序，且存在两个关键问题：

1. 使用 $(rhs) - $(lhs) 实现降序，逻辑易混淆；
2. 未处理 times 字段的解析与比较——直接字符串比较 "12:39" > "09:55" 在 JavaScript 中是可行的（因 ISO 格式时间字符串具备字典序可比性），但需确保格式统一（如始终为 HH:MM，且补零）；
3. 答案示例中误用了 .find(".child span.points")，而 HTML 结构中并无 .child 容器，应直接查找子元素 span.points 和 span.times。

✅ 正确、健壮的实现如下：

Roboflow

一个为计算机视觉和机器学习提供工具和服务的平台

下载

$(function() {
    var sortedList = $('.contest_entry').toArray().sort(function(lhs, rhs) {
        // 提取并转换 points 值（容错：NaN 时设为 0）
        var lhsPoints = parseInt($(lhs).children('span.points').text().trim(), 10) || 0;
        var rhsPoints = parseInt($(rhs).children('span.points').text().trim(), 10) || 0;

        // 主排序：points 降序 → 即 rhsPoints - lhsPoints
        if (lhsPoints !== rhsPoints) {
            return rhsPoints - lhsPoints;
        }

        // 次排序：times 升序（时间越早越靠前）
        var lhsTime = $(lhs).children('span.times').text().trim();
        var rhsTime = $(rhs).children('span.times').text().trim();

        // 字符串比较适用于标准 HH:MM 格式（如 "09:55" < "12:39" ✅）
        if (lhsTime < rhsTime) return -1;
        if (lhsTime > rhsTime) return 1;
        return 0;
    });

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

? 关键说明与最佳实践：

• ✅ 使用 .children() 而非 .find() 更精准（避免嵌套干扰）；
• ✅ trim() 清除空格，防止 " 09:55 " 解析异常；
• ✅ || 0 防御性处理，避免 NaN 导致排序错乱；
• ✅ 时间字符串比较依赖其格式一致性；若需支持 "9:55" 或 "12:39:22"，建议统一解析为 Date 对象或分钟数再比较；
• ⚠️ 注意：.html(sortedList) 会替换整个 #list 内容，若需保留原有容器结构（如外层
  ），此方式安全；但若 #list 内含其他非 .contest_entry 元素，将被清空——此时应改用 .append() 或先清空再注入。

  最终排序结果示例（基于你的 HTML 数据）：

  1. points=19, times=17:19
  2. points=19, times=17:20
  3. points=19, times=17:34
  4. points=16, times=09:55
  5. points=14, times=12:39

  该方案简洁、可扩展——如需新增第三级排序（如按用户名字母序），只需在 lhsPoints === rhsPoints && lhsTime === rhsTime 分支内追加逻辑即可。