如何为ul元素生成动态唯一类名？现有JS实现未达预期求指导

现有代码问题 #

• 选择器.main-nav > .main-nav-list仅匹配.main-nav的直接子级ul，只能拿到第一层导航列表
• 所有子ul添加的类名均为固定的hasChild sub，没有唯一标识字段，无法实现类名唯一的需求
• 直接用setAttribute修改class属性的方式容易误覆盖原有类，容错性低

解决方案 #

通过全局递增序号给每一个ul添加带唯一标识的自定义类，同时保留层级类标识，且不会覆盖原有类名：

// 定义全局递增序号，保证类名唯一
let ulIndex = 0;
document
  // 选中main-nav下所有的ul元素
  .querySelectorAll(".main-nav ul")
  .forEach((element) => {
    ulIndex++;
    // 追加通用类
    element.classList.add("hasChild");
    // 区分层级：第一层加top类，深层加sub类
    element.classList.add(ulIndex === 1 ? "top" : "sub");
    // 添加唯一动态类，格式可根据需求自定义
    element.classList.add(`nav-ul-${ulIndex}`);
  });

运行代码后，你示例中的3个ul元素会分别新增唯一类nav-ul-1、nav-ul-2、nav-ul-3，完全满足类名唯一的需求。

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