jquery 排序
jQuery 排序方法
在 jQuery 中,可以通过多种方式对 DOM 元素或数组进行排序。以下是几种常见的排序方法:
对 DOM 元素排序
使用 jQuery 的 sort() 方法结合 appendTo() 对 DOM 元素进行重新排序:
// 按文本内容升序排列
$('.item').sort(function(a, b) {
return $(a).text().localeCompare($(b).text());
}).appendTo('#container');
// 按自定义属性排序
$('.item').sort(function(a, b) {
return $(a).data('price') - $(b).data('price');
}).appendTo('#container');
对数组排序
jQuery 可以配合原生 JavaScript 数组方法进行排序:
var arr = [5, 3, 9, 1, 6];
arr.sort(function(a, b) {
return a - b; // 升序
// return b - a; // 降序
});
对对象数组排序
var users = [
{ name: 'John', age: 25 },
{ name: 'Alice', age: 30 },
{ name: 'Bob', age: 20 }
];
users.sort(function(a, b) {
return a.age - b.age; // 按年龄升序
});
使用 jQuery.each() 遍历排序结果
$.each(sortedArray, function(index, value) {
console.log(value);
});
注意事项
- DOM 元素排序会实际改变页面中元素的顺序
- 数组排序是原地排序(会修改原数组)
- 字符串比较推荐使用
localeCompare()方法 - 复杂排序可以自定义比较函数
这些方法可以满足大多数前端开发中的排序需求,结合 jQuery 的链式调用可以简洁地实现各种排序功能。







