如何使用JavaScript为LI下的UL元素生成相同的类名？

Question

我尝试在ul元素中动态生成/创建类名，并成功地获得了预期的结果，这可以在片段的控制台中看到以供参考。

但是，如果ul是在li元素下生成的，我将尝试创建相同的类名。例如，有一个类名为li的"a"元素，如果我们在同一个li元素下创建多个ul元素，那么ul的类名应该与下面相同，但不是计算该类。

我需要的结果是：

<li class="a">
    <a href="/">First</a>
    <ul class="main-nav-list">
        <li class="b">
            <a href="/">Type of menu</a>
            <ul class="main-nav-list ul-1"> //The ul-1 should be static (even after dyanmic class generated) to the next ul li example if ul-1 one come the next li with ul should also have the same class ul-1
                <li class="c"><a href="/">Summer</a></li>
            </ul> 
        </li>
        <li class="b">
            <a href="/">Type of menu</a>
            <ul class="main-nav-list ul-1">
                <li class="c"><a href="/">Summer</a></li>
            </ul>
        </li>

到目前为止我尝试过的代码

​

var ul = document.querySelectorAll(".main-nav ul");

ul.forEach((each, i) => {
    each.classList.add("ul-" + i);
    console.log(each)
});

<nav class="main-nav">
  
  <ul class="main-nav-list">
    <li class="a">
      <a href="/">First</a>
      
      <ul class="main-nav-list"> 
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>
    
    </li>
  </ul>

</nav>

​

如果第一个Ul有类ul-0，那么下一个ul也应该将ul-0作为一个类。任何帮助都将不胜感激！

Answer 1

您必须选择每个li，并对每个ul进行迭代，然后向它们添加任何类。

​

// selecting li's of main ul in the page
var lis = document.querySelectorAll(".main-nav>ul>li");

lis.forEach((each) => {

    // selecting all uls inside each li
    let innerUls = each.querySelectorAll(`:scope>ul`)


    // adding class name to each ul
    innerUls.forEach((itm, index) => {
      itm.classList.add("ul-" + index);
    })
});

<nav class="main-nav">
  
  <ul class="main-nav-list">
    <li class="a">
      <a href="/">First</a>
      
      <ul class="main-nav-list"> 
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>
    
    </li>
    
    <li class="a">
      <a href="/">Second</a>
      
      <ul class="main-nav-list"> 
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>
      
      <ul class="main-nav-list"> 
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>
      
      <ul class="main-nav-list"> 
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>
    </li>
  </ul>
</nav>

​

更新

递归地将类添加到ul的

​

let classNames = ['a', 'b', 'c', 'd', 'e'];
function addClassToUls(ul, level) {
  var lis = ul.querySelectorAll(':scope>li');
  lis.forEach((each) => {

    // selecting all uls inside each li
    let innerUls = each.querySelectorAll(`:scope>ul`)


    // adding class name to each ul
    innerUls.forEach((itm, index) => {
      itm.classList.add(`ul-${level}-${classNames[index]}`);
      addClassToUls(itm, level+1);
    })
  })
}

let mainUls = document.querySelectorAll(".main-nav>ul");

mainUls.forEach(ul => addClassToUls(ul, 1))

<nav class="main-nav">

  <ul class="main-nav-list">
    <li class="a">
      <a href="/">First</a>

      <ul class="main-nav-list">
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>

    </li>

    <li class="a">
      <a href="/">Second</a>

      <ul class="main-nav-list">
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>

      <ul class="main-nav-list">
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>

      <ul class="main-nav-list">
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>
    </li>
  </ul>
</nav>

​