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

Question

我尝试在 ul 元素中动态地 generate/create class 名称，我成功地得到了预期的结果，可以在代码段的控制台中看到以供参考.

但如果 ul 是在 li 元素下生成的，我会尝试创建相同的 class 名称。例如，有一个 class 名称为 "a" 的 li 元素，如果我们在同一个 li 元素下创建多个 ul 元素，则 class ul 的名称应该与下面相同，但不是 class 被计算在内。

我需要的结果：

<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 有 class ul-0 那么下一个 ul 也应该有 ul-0 作为 class。任何帮助将不胜感激!!

Answer 1

您必须 select 每个 li 并且对每个 ul 进行迭代，然后添加您想要的任何 class。

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

更新

递归地将 class 添加到 uls

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>

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

How to generate the same class name for UL element under LI using JavaScript?

html

javascript

css

foreach

class