使用jQuery根据li的类属性将其封装为正确层级的嵌套有序/无序列表

云原生阿岚

2026-9-27

嵌套列表生成方案

实现逻辑

先为每个li提取两个核心属性：level（将class中O开头属性的后缀数字转为整数，如O1对应1、O2对应2）、listTag（ordered对应ol标签、unordered对应ul标签）
维护栈结构存储当前层级的列表容器，栈初始放入层级为0的虚拟根节点，用于承载一级列表
逐个遍历所有li：
1. 弹出栈中所有层级大于等于当前li层级的元素，直到栈顶元素层级等于当前li层级减1
2. 检查栈顶容器的最后一个子节点是否为与当前li匹配的列表容器，若不匹配则新建对应类型的列表标签，追加到栈顶容器后将新列表压入栈
3. 将当前li追加到栈顶的列表容器内
遍历完成后取出虚拟根节点下的内容，即为最终合规的嵌套列表结构

代码实现（JavaScript示例）

function generateNestedList(liElements) {
  // 初始化虚拟根节点，层级为0
  const root = document.createElement('div');
  const stack = [{ level: 0, element: root }];

  liElements.forEach(li => {
    // 提取当前li的层级和对应列表类型
    const classArr = li.className.split(' ');
    const level = parseInt(classArr.find(item => item.startsWith('O')).slice(1));
    const listTag = classArr.includes('ordered') ? 'ol' : 'ul';

    // 弹出栈中高于等于当前层级的容器
    while (stack.at(-1).level >= level) {
      stack.pop();
    }
    const parentContainer = stack.at(-1);

    // 校验父容器下是否存在匹配的目标列表
    let targetList = parentContainer.element.lastElementChild;
    if (!targetList || targetList.tagName.toLowerCase() !== listTag) {
      targetList = document.createElement(listTag);
      parentContainer.element.appendChild(targetList);
      stack.push({ level, element: targetList });
    }

    // 插入当前li到目标列表
    targetList.appendChild(li);
  });

  return root.innerHTML;
}