在前端页面开发中，经常需要对一组div元素按照多个条件进行排序，比如先按分数从高到低排序，分数相同的情况下再按时间从早到晚排序，这种复合排序需求可以通过jQuery结合数组排序方法实现。核心思路是先获取所有需要排序的div元素，将其转换为数组后使用自定义的比较函数进行排序，最后将排序后的元素重新插入到容器中。
实现步骤
1. 准备待排序的div结构
首先我们准备一组包含分数和时间属性的div元素，分数存储在data-score属性中，时间存储在data-time属性中，结构如下：
<div class="container"> <div class="item" data-score="85" data-time="2024-03-01">分数：85，时间：2024-03-01</div> <div class="item" data-score="92" data-time="2024-02-15">分数：92，时间：2024-02-15</div> <div class="item" data-score="85" data-time="2024-01-20">分数：85，时间：2024-01-20</div> <div class="item" data-score="78" data-time="2024-04-10">分数：78，时间：2024-04-10</div> </div>
2. 编写排序逻辑
使用jQuery获取所有div元素后，将其转换为数组，然后调用数组的sort方法，传入自定义的比较函数。比较函数先处理分数的降序比较，如果分数相同再处理时间的升序比较：
$(function() {
// 获取容器和所有待排序的div元素
var $container = $('.container');
var $items = $('.item');
// 将jQuery对象转换为数组，方便使用sort方法
var itemsArray = $items.toArray();
// 自定义比较函数实现复合排序
itemsArray.sort(function(a, b) {
// 获取分数，转换为数字类型
var scoreA = parseInt($(a).data('score'));
var scoreB = parseInt($(b).data('score'));
// 分数降序比较：分数高的排在前面
if (scoreA > scoreB) {
return -1;
}
if (scoreA < scoreB) {
return 1;
}
// 分数相同的情况下，比较时间，时间升序：时间早的排在前面
var timeA = new Date($(a).data('time')).getTime();
var timeB = new Date($(b).data('time')).getTime();
if (timeA < timeB) {
return -1;
}
if (timeA > timeB) {
return 1;
}
// 分数和时间都相同的元素保持原有顺序
return 0;
});
// 清空容器，将排序后的元素重新插入
$container.empty();
$.each(itemsArray, function(index, item) {
$container.append(item);
});
});
3. 排序结果说明
运行上述代码后，div元素的排序结果如下：
- 首先按分数降序，92分的div排在最前面
- 分数同为85的两个div，按时间升序，2024-01-20的排在2024-03-01的前面
- 最后是78分的div
注意事项
在实现过程中需要注意几个问题：
- 从
data属性获取的分数和时间如果是字符串类型，需要转换为对应的数字或时间对象再比较，否则会出现字符串比较的错误结果 sort方法的比较函数返回值规则：返回负数表示第一个参数排在前面，返回正数表示第二个参数排在前面，返回0表示顺序不变- 如果时间格式不是标准的时间字符串，需要先处理成可解析的格式再转换为时间戳
扩展场景
如果需要支持更多排序条件，只需要在比较函数中依次添加对应的比较逻辑即可，比如先按分数降序，再按时间升序，最后按名称升序，只需要在分数比较之后添加名称和时间的比较逻辑即可。如果是动态切换排序规则，可以将比较函数封装成可配置的形式，根据用户的操作动态生成对应的比较函数。