为lvl_1层级li添加唯一ID，并为其子级lvl_2的li添加对应类

没问题，我帮你调整代码来实现这个需求，下面是完整的解决方案：

完整JavaScript代码 #

// 获取所有ul.lvl_1的直接子li元素
const level1Items = document.querySelectorAll("div.menu_sub_box ul.lvl_1 > li");

level1Items.forEach((item, index) => {
  // 给当前lvl_1的li设置唯一ID（从1开始）
  const itemId = index + 1;
  item.id = itemId;
  
  // 找到当前li下的所有ul.lvl_2的子li元素
  const level2Items = item.querySelectorAll("ul.lvl_2 > li");
  
  // 给每个lvl_2的li添加对应格式的类名
  level2Items.forEach(li => {
    li.classList.add(`${itemId}-col`);
  });
});

代码说明 #

我把你的初始代码做了扩展，分四步完成需求：

• 定位顶层菜单项：用querySelectorAll精准选中div.menu_sub_box下ul.lvl_1的直接子li，确保只处理最外层的菜单条目。
• 生成唯一ID：通过遍历的index值加1，给每个顶层li设置从1开始的连续ID。
• 定位子菜单条目：在每个顶层li内部，查找它下面的ul.lvl_2的所有子li，这样能保证子菜单类名和父项ID一一对应。
• 添加目标类名：用模板字符串拼接出{ID}-col格式的类名，通过classList.add安全地添加到子菜单li上（这个方法不会覆盖元素原有类名，只会追加）。

效果验证 #

运行这段代码后，你的HTML会完全符合你给出的示例效果：每个顶层li拥有从1开始的唯一ID，它下面的所有子菜单li都会带上对应ID的{ID}-col类名。

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