使用Javascript将级别类添加到嵌套列表中

我正在尝试将级别类别添加到具有嵌套列表项的列表中。 我想要以下结构

头衔级别1
头衔级别1

标题级别2

三级职称
三级职称


标题级别2

三级职称
三级职称
三级职称




头衔级别1

标题级别2


头衔级别1
头衔级别1

标题级别2

如您所见，父列表中有一些嵌套列表，同时可能包含另一个嵌套列表。 我尝试了以下Javascript函数，其中parent是主列表的父级，level第一级的整数可以是0或1

函数addLevelClass（父级，级别）{
const iteration=parent.queryselectoral（“ul”）；
const firstUL=父查询选择器（“ul”）；
firstUL.classList.add（“父级”，“父级-”+级）；
const firstItems=parent.querySelectorAll（“li”）；
控制台信息（第一项）；
//如果没有列表项，则没有意义。
如果（！firstItems.length）{
返回；
}
//环槽第一级
for（设c=0；c

---

函数在3er级别的某个地方丢失，无法为列表的其余部分设置级别。

理解此问题的最佳方法是HTML结构是一个树数据结构（如果您希望进一步研究，实际上它是一个DAG）

这些问题是数据结构CS101（以及如何遍历/搜索）的一部分。提供的解决方案是DFS

但是，为了解决这个问题，你需要考虑<代码>递归< /代码>。 i、 e.给定以下树结构：

| root
|
|- leaf node
|- node with children
 |- leaf node

因此，我们首先要找到根节点。 这里您正在查找

document.querySelector（'ul'）

然后，您将在

根ul

中查找叶节点。 在这里，您将执行类似于

document.querySelector（'ul>li'）

的操作。这将为您提供根节点中的现有子节点

从这里开始，您需要切换父对象和子对象，以递归方式执行操作

我将在下面提供一个示例：

//助手fn
const findChildren=el=>[…el.children].filter（el=>el.tagName===“LI”）
const root=document.querySelector（“ul”）；
const children=findChildren（根）；
常量遍历=（基节点，子节点，iter=1）=>{
//此处使用iter处理baseNode
baseNode.classList.add（`list-${iter.toString（）}`）
为（儿童之子）{
add（`child-${iter.toString（）}`）
让hasGranChild=[…child.children].filter（el=>el.tagName===“UL”）.length
如果（孩子）{
让newChild=[…child.children].find（el=>el.tagName===“UL”）；
const granChildren=findChildren（newChild）
导线测量（新子女、格兰子女、iter+1）
}
}
}
遍历（根，子项）

标题级别1
标题级别1

职称等级2

职称等级3
职称等级3


职称等级2

职称等级3
职称等级3
职称等级3




标题级别1

职称等级2


标题级别1
标题级别1

职称等级2

理解此问题的最佳方法是HTML结构是一个树数据结构（如果您希望进一步研究，实际上它是一个DAG）

这些问题是数据结构CS101（以及如何遍历/搜索）的一部分。提供的解决方案是DFS

但是，为了解决这个问题，你需要考虑<代码>递归< /代码>。 i、 e.给定以下树结构：

| root
|
|- leaf node
|- node with children
 |- leaf node

因此，我们首先要找到根节点。 这里您正在查找

document.querySelector（'ul'）

然后，您将在

根ul

中查找叶节点。 在这里，您将执行类似于

document.querySelector（'ul>li'）

的操作。T