如何使用jQuery按data-id排序非表格结构的HTML待办列表元素？

你完全不需要依赖表格来实现排序！非表格结构的DOM元素同样可以用jQuery轻松完成排序，核心是对元素集合排序后重新渲染到容器中。

问题分析 #

你已经给每个待办项（.list-elem）设置了data-id来标记优先级（1=最高，3=最低），之前的代码只是对数组newArr做了排序，但没有把排序后的结果同步到实际的DOM结构里，所以页面上看不到排序效果。

解决方案实现 #

我们可以直接操作DOM元素集合，通过sort()方法定义排序规则，再把排序后的元素重新追加到容器中。以下是完整的修正代码：

按优先级从高到低排序（重要性优先）

function importantOption() {
  // 获取所有待办项元素
  var items = $('.list-elem');
  // 根据data-id降序排序（1=最高优先级，所以b-a实现从高到低）
  items.sort(function(a, b){
    return $(b).data('id') - $(a).data('id');
  });
  // 将排序后的元素重新添加到容器中
  items.appendTo('.to-do-lists');
}

按优先级从低到高排序

function lowestOption() {
  var items = $('.list-elem');
  items.sort(function(a, b){
    return $(a).data('id') - $(b).data('id');
  });
  items.appendTo('.to-do-lists');
}

按日期排序（根据待办项里的日期字符串）

function dateOption() {
  var items = $('.list-elem');
  items.sort(function(a, b){
    // 提取元素内的日期时间字符串，转成可比较的Date对象
    var dateStrA = $(a).find('.to-do-date h3').text();
    var dateA = new Date(dateStrA.replace(/(\d+)\/(\d+)\/(\d+)/, '$3-$2-$1'));
    
    var dateStrB = $(b).find('.to-do-date h3').text();
    var dateB = new Date(dateStrB.replace(/(\d+)\/(\d+)\/(\d+)/, '$3-$2-$1'));
    
    // 按日期升序（早的在前），如果要降序就返回dateB - dateA
    return dateA - dateB;
  });
  items.appendTo('.to-do-lists');
}

小优化建议 #

你原来的countArray()函数只是把id推到newArr里，但当用户删除待办项时，这个数组并没有同步更新，后续依赖这个数组的逻辑可能会出问题。建议直接从DOM元素上获取data-id来排序，就像上面的方案一样，这样不需要维护额外的数组，逻辑更可靠。

内容的提问来源于stack exchange，提问作者Mariusz