jquery排序
jQuery 排序方法
jQuery本身不提供直接的排序功能,但可以通过JavaScript原生方法结合jQuery选择器来实现元素或数据的排序。以下是常见的几种实现方式:
对DOM元素进行排序
使用jQuery的sort()方法结合appendTo()重新排列DOM元素:

// 按文本内容升序排列
$('.item').sort(function(a, b) {
return $(a).text().localeCompare($(b).text());
}).appendTo('#container');
对数组进行排序
通过JavaScript原生sort()方法处理数组后更新DOM:

const items = $('.item').get(); // 转为原生DOM数组
items.sort((a, b) => {
return $(a).data('price') - $(b).data('price'); // 按data-price属性排序
});
$('#container').append(items);
表格列排序示例
实现点击表头排序表格数据的功能:
$('th').click(function() {
const column = $(this).index();
const $table = $(this).closest('table');
const $rows = $table.find('tr:gt(0)').toArray();
$rows.sort((a, b) => {
const aVal = $(a).find('td').eq(column).text();
const bVal = $(b).find('td').eq(column).text();
return aVal.localeCompare(bVal);
});
$table.append($rows);
});
使用jQuery UI的Sortable插件
对于交互式拖拽排序,推荐使用jQuery UI的Sortable组件:
$('#sortable-list').sortable({
axis: 'y',
update: function(event, ui) {
// 排序完成后的回调
console.log($('#sortable-list').sortable('toArray'));
}
});
注意事项
- 复杂数据排序建议先提取数据到数组,排序后再更新DOM
- 数字排序需显式转换为数值类型避免字符串比较
- 中文排序推荐使用
localeCompare()方法 - 大数据量排序时考虑性能优化(虚拟滚动等)






