如何用jQuery对多层列表按字母排序？子列表合并问题求助

我明白你遇到的问题了——排序多层列表时，子列表的项被意外合并到主列表里，完全打乱了原本的层级结构，这确实挺闹心的。咱们来看看问题出在哪，以及怎么修复：

问题根源 #

你的代码里用了$(this).find('li')，这个方法会递归查找当前ul下所有后代li元素，包括子列表（嵌套的ul）里的li。当你把这些li全部拿出来排序再追加回去时，子列表的项就被从原来的嵌套结构里剥离出来，和主列表的项混在一起了，自然就出现了合并的情况。

修复方案 #

只需要把find('li')换成children('li')，这个方法只会获取当前ul的直接子级li元素，不会碰嵌套在子列表里的项，这样就能保证排序时只处理主列表的项，子列表的结构完全保留。

修正后的代码如下：

$('#test').click(function(e) {
  $(".first ul").each(function() {
    // 只选择当前ul的直接子li，不包含子列表里的li
    $(this).children('li').sort(function(a, b) {
      var aText = $(a).text().trim(), 
          bText = $(b).text().trim();
      // 加上trim()可以避免文本前后空格影响排序结果
      return aText < bText ? -1 : aText > bText ? 1 : 0;
    }).appendTo(this);
  });
});

额外优化提示 #

如果你的子列表也需要单独排序，可以在主排序的逻辑里，再递归处理每个子ul，这样不仅主列表能正常排序，所有嵌套的子列表也会各自按文本排序，同时层级结构完全保留：

$('#test').click(function(e) {
  function sortList($ul) {
    // 排序当前ul的直接子li
    $ul.children('li').sort(function(a, b) {
      var aText = $(a).text().trim(), 
          bText = $(b).text().trim();
      return aText < bText ? -1 : aText > bText ? 1 : 0;
    }).appendTo($ul);
    // 递归排序每个子ul
    $ul.find('ul').each(function() {
      sortList($(this));
    });
  }

  $(".first ul").each(function() {
    sortList($(this));
  });
});

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