本文详解如何使用 jquery 对 dom 元素（如 .contest_entry）实现多级排序：优先按 points 降序排列，points 相同时再按 times 升序（即耗时更短者优先）。
在实际前端开发中，仅按单一字段排序往往无法满足业务需求。例如竞赛排行榜需“先看得分高低，得分相同时比用时长短”，这就要求我们实现多条件复合排序。jQuery 本身不提供原生多字段排序方法，但可通过 Array.prototype.sort() 的比较函数自定义逻辑——关键在于正确处理比较优先级与返回值。
以下为优化后的完整解决方案（已修正原答案中的选择器错误，并增强健壮性）：
$(function() {
var sortedList = $('.contest_entry').toArray().sort(function(lhs, rhs) {
// 提取 points 值（确保非 NaN）
var lhsPoints = parseInt($(lhs).find('span.points').text().trim(), 10) || 0;
var rhsPoints = parseInt($(rhs).find('span.points').text().trim(), 10) || 0;
// 主排序：points 降序（大 → 小）
if (lhsPoints !== rhsPoints) {
return rhsPoints - lhsPoints;
}
// 次排序：times 升序（早 → 晚），需将时间字符串标准化为可比较格式
var lhsTimeStr = $(lhs).find('span.times').text().trim();
var rhsTimeStr = $(rhs).find('span.times').text().trim();
// 简单字符串比较适用于 HH:MM 格式（前提是格式统一且补零）
// 更健壮做法：转换为 Date 对象或分钟数
var parseTimeToMinutes = function(timeStr) {
var match = timeStr.match(/^(\d{1,2}):(\d{2})$/);
if (!match) return Infinity;
var hour = parseInt(match[1], 10);
var minute = parseInt(match[2], 10);
return hour * 60 + minute;
};
var lhsMinutes = parseTimeToMinutes(lhsTimeStr);
var rhsMinutes = parseTimeToMinutes(rhsTimeStr);
return lhsMinutes - rhsMinutes; // 升序：小时间在前
});
$("#list").html(sortedList);
});✅ 关键说明：
- 选择器修正：原答案中 .find(".child span.points") 是错误的（HTML 中无 .child 容器），应直接使用 .find('span.points')；
- 空值防护：使用 || 0 防止 parseInt(undefined) 返回 NaN 导致排序异常；
- 时间解析强化：直接字符串比较 "09:55" "12:39" 会出错。因此推荐统一转为分钟数比较，兼容性更强；
- 排序稳定性：.sort() 在现代浏览器中是稳定排序（相同键值相对顺序不变），适合多级排序场景。
? 注意事项：
- 若 times 包含秒或 AM/PM，需扩展 parseTimeToMinutes 函数支持；
- 大量元素（>1000）排序建议结合虚拟滚动或后端分页，避免阻塞主线程；
- 可封装为 jQuery 插件（如 $.fn.sortByFields）提升复用性。
通过以上实现，示例数据将按预期排序：19分（17:19）→ 19分（17:20）→ 19分（17:34）→ 16分（09:55）→ 14分（12:39），精准满足“高分优先、同分比快”的业务规则。
