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）批量操作。