Добавление того же класса к дочернему элементу зависит от 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 = 'lvl-1'. Я делаю это с помощью foreach l oop, затем я хочу добавить к каждому дочернему

элементу 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>

Извините за мой английский sh Я надеюсь, вы понимаете, что я хочу сделать. Спасибо за помощь

Answer 1

В целях печати я указал идентификатор для контейнера контейнера, чтобы увидеть сам html после того, как идентификаторы были прикреплены. В основном вы можете перебирать все элементы <li> и устанавливать id=1 затем для всех дочерних элементов <ul> добавить "-col" к существующему идентификатору.

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>

Answer 2

Если я правильно понял, это ответ:

let liElements = document.querySelectorAll("div.menu_sub_box ul.lvl_1 > li");
liElements.forEach((el, index) => {
    let id = (el.id = index + 1);
    el.id = id;
    let cols = el.querySelectorAll("li");
    cols.forEach((col) => {
        col.className = (index + 1) + "-col";
    })
})

<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>