javascript - 向子元素添加相同的类取决于ul ID

这是我的HTML

let allElements = document.querySelectorAll("div.menu_sub_box ul.lvl_1 > li");
allElements.forEach((el, index) => {
  console.log(el);
  let id = (el.id = index + 1);
});

<div class="menu_sub_box">
      <ul class="lvl_1">
        <li>
          <a class="lvl_1" href="abc">val 1</a>
          <ul class="lvl_2">
            <li><a href="item1">Item 1 content</a></li>
            <li><a href="item2">Item 1 content</a></li>
            <li><a href="item2">Item 1 content</a></li>
          </ul>
        </li>
        <li>
          <a class="lvl_1" href="abc">val 2</a>
          <ul class="lvl_2">
            <li><a href="item1">Item 1 content</a></li>
            <li><a href="item2">Item 1 content</a></li>
            <li><a href="item2">Item 1 content</a></li>
          </ul>
        </li>
      </ul>
    </div>

这是我的问题。我想向每个li类='lvl-1'添加uniqe ID。我通过foreach循环执行此操作，然后将依赖于此ID的同一类添加到class ='lvl_2'的每个子元素中。例如 ：

<ul class="lvl_1">
        <li id='1'>
          <a class="lvl_1" href="abc">val 1</a>
          <ul class="lvl_2">
            <li class='1-col'><a href="item1">Item 1 content</a></li>
            <li class='1-col'><a href="item2">Item 1 content</a></li>
            <li class='1-col'><a href="item2">Item 1 content</a></li>
          </ul>
        </li>
        <li id='2'>
          <a class="lvl_1" href="abc">val 2</a>
          <ul class="lvl_2">
            <li class='2-col'><a href="item1">Item 1 content</a></li>
            <li class='2-col'><a href="item2">Item 1 content</a></li>
            <li class='2-col'><a href="item2">Item 1 content</a></li>
          </ul>
        </li>
      </ul>

对不起我的英语，希望您能理解我的意思。感谢帮助

最佳答案

出于打印目的，我将ID指定给容器div，以便在附加ID之后查看html本身。基本上，您可以遍历所有<li>元素并设置id=1，然后为<ul>的所有子元素添加一个"-col"更改为现有ID。

let lis = document.querySelectorAll("div.menu_sub_box ul.lvl_1 > li");
lis.forEach((element, index) => {
  const id_cols = element.querySelectorAll("li");

  element.id = index + 1;

  id_cols.forEach((column) => {
    column.className = (index + 1) + "-col";
  })

})

console.log(document.getElementById("menu_sub_box").innerHTML)

<div class="menu_sub_box" id="menu_sub_box">
  <ul class="lvl_1">
    <li>
      <a class="lvl_1" href="abc">val 1</a>
      <ul class="lvl_2">
        <li><a href="item1">Item 1 content</a></li>
        <li><a href="item2">Item 1 content</a></li>
        <li><a href="item2">Item 1 content</a></li>
      </ul>
    </li>

    <li>
      <a class="lvl_1" href="abc">val 2</a>
      <ul class="lvl_2">
        <li><a href="item1">Item 2 content</a></li>
        <li><a href="item2">Item 2 content</a></li>
        <li><a href="item2">Item 2 content</a></li>
      </ul>
    </li>

    <li>
      <a class="lvl_1" href="abc">val 3</a>
      <ul class="lvl_3">
        <li><a href="item1">Item 3 content</a></li>
        <li><a href="item2">Item 3 content</a></li>
        <li><a href="item2">Item 3 content</a></li>
      </ul>
    </li>

  </ul>
</div>