如何使用JavaScript为同一LI下的UL元素生成相同类名

解决方案 #

你原有代码的问题是对全局所有ul做了统一遍历计数，导致类名随ul的总数量依次递增。我们改为按ul的嵌套深度分配类名，即可实现同一层级所有ul共用相同类名的需求：

const ulList = document.querySelectorAll(".main-nav ul");

ulList.forEach(ulItem => {
  let depth = 0;
  let el = ulItem;
  // 向上遍历计算当前ul的嵌套层级
  while (el.parentElement) {
    el = el.parentElement;
    if (el.tagName === 'UL') depth++;
  }
  // 可根据需要调整深度起始值，比如需要最外层ul从ul-1开始，就改为depth + 1
  ulItem.classList.add(`ul-${depth}`);
});

效果说明 #

运行上述代码后，你提供的HTML结构会生成完全符合预期的类名：

• 最外层直接隶属于.main-nav的ul层级为0，统一加类ul-0
• 类名为a的li下的ul层级为1，统一加类ul-1
• 两个类名为b的li下的ul层级相同，都会加统一的ul-2类名，不会出现依次递增的问题

如果你需要调整层级计数的起始值，修改depth的初始值或者拼接类名时的偏移量即可。

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