如何用jQuery将带数据属性的平级列表转换为嵌套列表

这是个很常见的导航结构转换需求，我来给你一步步实现：

完整实现代码 #

$(document).ready(function() {
  // 先把所有列表项从原容器中取出，避免DOM频繁操作
  const $listItems = $('nav ul li').detach();
  const itemLookup = {};
  const topLevelItems = [];

  // 第一步：构建每个列表项的映射关系，区分顶级项和子项
  $listItems.each(function() {
    const $item = $(this);
    const itemId = $item.attr('id');
    const parentId = $item.attr('parent_id');

    // 把当前项存入映射表，同时预留子项数组
    itemLookup[itemId] = {
      element: $item,
      children: []
    };

    // parent_id为0的是顶级项，直接加入顶级数组
    if (parentId === '0') {
      topLevelItems.push(itemLookup[itemId]);
    } else {
      // 把当前项添加到对应父项的子列表中
      if (itemLookup[parentId]) {
        itemLookup[parentId].children.push(itemLookup[itemId]);
      }
    }
  });

  // 第二步：递归生成嵌套列表的工具函数
  function createNestedList(items) {
    const $ul = $('<ul>');
    // 按照c_order属性排序，保证列表顺序正确
    items.sort((a, b) => parseInt(a.element.attr('c_order')) - parseInt(b.element.attr('c_order')));

    items.forEach(item => {
      const $li = item.element;
      // 如果当前项有子项，递归生成子列表并追加到当前li中
      if (item.children.length > 0) {
        $li.append(createNestedList(item.children));
      }
      $ul.append($li);
    });
    return $ul;
  }

  // 第三步：生成完整的嵌套列表并替换原导航内容
  const $nestedNav = createNestedList(topLevelItems);
  $('nav').empty().append($nestedNav);
});

代码解释 #

• DOM优化：用detach()把所有li从原ul中移出，后续操作脱离DOM树，避免多次重排重绘，提升性能。
• 映射表构建：通过itemLookup对象快速查找每个项的父项，把平级的li按parent_id归类成树形结构。
• 排序处理：利用c_order属性对子项排序，确保最终的嵌套列表和原数据的顺序一致。
• 递归生成：createNestedList函数递归处理每个项的子列表，自动生成嵌套的ul结构，不管层级有多深都能适配。

额外提示 #

• 如果你的parent_id是数字类型（不是字符串），记得把判断条件改成parentId === 0。
• 要是不需要保留原li的parent_id和c_order属性，可以在生成后移除：$li.removeAttr('parent_id c_order')。
• 如果存在父项不存在的子项，代码里的if (itemLookup[parentId])会跳过这些项，避免报错，你可以根据需求添加错误提示或者处理逻辑。

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