javascript - 根据 ul ID 将相同的类添加到子元素

Question

这是我的 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 class ='lvl-1' 添加唯一 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>

抱歉我的英语不好，我希望你能明白我想做什么。感谢您的帮助

Answer 1

出于打印目的，我为容器 div 指定了 id，以便在附加 id 后查看 html 本身。基本上，您可以遍历所有 <li>元素和集合id=1那么对于<ul>的所有 child 附加 "-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>