jquery排序
jQuery 排序方法
jQuery本身不直接提供排序功能,但可以结合JavaScript原生方法或插件实现数据或DOM元素的排序。以下是几种常见场景的解决方案:
数组排序
使用JavaScript的Array.prototype.sort()方法对数组进行排序,jQuery可辅助获取或操作数据:

var arr = [5, 3, 9, 1];
arr.sort(function(a, b) {
return a - b; // 升序排列
});
console.log(arr); // 输出 [1, 3, 5, 9]
DOM元素排序
通过jQuery获取元素集合后,转换为数组进行排序,再重新插入DOM:
var $items = $('.list-item');
$items.get().sort(function(a, b) {
return $(a).data('price') - $(b).data('price');
}).forEach(function(item) {
$('.list-container').append(item);
});
表格列排序
结合jQuery选择器和表格操作实现:

$('th.sortable').click(function() {
var column = $(this).index();
var $table = $(this).closest('table');
var $rows = $table.find('tr:gt(0)').toArray();
$rows.sort(function(a, b) {
var valA = $(a).find('td').eq(column).text();
var valB = $(b).find('td').eq(column).text();
return valA.localeCompare(valB);
});
$.each($rows, function(index, row) {
$table.append(row);
});
});
使用jQuery插件
对于复杂排序需求,可引入专用插件如:
tablesorter(表格排序)sortable(交互式拖拽排序)isotope(网格布局排序)
// 使用tablesorter插件示例
$('table').tablesorter({
sortList: [[0,0]] // 默认按第一列升序
});
对象数组排序
对包含对象的数组按属性排序:
var users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 }
];
users.sort(function(a, b) {
return a.age - b.age;
});
注意:DOM操作会触发重排(reflow),对性能敏感的场景建议使用文档片段(DocumentFragment)批量操作。






