如何用javascript将Html ul/ol列表转换成树状数据结构？

要将HTML的ul/ol列表转换成树状数据结构，可以使用JavaScript来实现。下面是一个实现的示例代码：

function convertListToTree(list) {
  const tree = [];
  const map = {};

  // 遍历列表，将每个节点存储到map中
  for (let i = 0; i < list.length; i++) {
    map[list[i].id] = list[i];
    list[i].children = [];
  }

  // 构建树状结构
  for (let i = 0; i < list.length; i++) {
    const node = list[i];
    if (node.parentId !== null) {
      // 如果有父节点，则将当前节点添加到父节点的children数组中
      map[node.parentId].children.push(node);
    } else {
      // 如果没有父节点，则将当前节点作为根节点
      tree.push(node);
    }
  }

  return tree;
}

// 示例数据
const list = [
  { id: 1, name: 'Node 1', parentId: null },
  { id: 2, name: 'Node 1.1', parentId: 1 },
  { id: 3, name: 'Node 1.2', parentId: 1 },
  { id: 4, name: 'Node 1.1.1', parentId: 2 },
  { id: 5, name: 'Node 2', parentId: null },
  { id: 6, name: 'Node 2.1', parentId: 5 },
];

// 调用函数进行转换
const tree = convertListToTree(list);
console.log(tree);

上述代码中，我们首先定义了一个convertListToTree函数，该函数接受一个包含列表数据的数组作为参数。然后，我们创建一个空数组tree用于存储最终的树状结构，以及一个空对象map用于存储每个节点的引用。

接下来，我们遍历列表数据，将每个节点存储到map对象中，并为每个节点添加一个空数组children用于存储其子节点。

然后，我们再次遍历列表数据，判断每个节点是否有父节点。如果有父节点，则将当前节点添加到父节点的children数组中；如果没有父节点，则将当前节点作为根节点添加到tree数组中。

最后，我们返回tree数组，即为转换后的树状数据结构。

这种转换方法适用于将任意层级的ul/ol列表转换成树状结构，可以方便地进行树状数据的操作和展示。

腾讯云相关产品和产品介绍链接地址：