如何为 ul 创建动态 class 名称？

Question

我想要达到的结果是每个 ul 应该有 different/dynamic class 个名字并且它应该是唯一的。下面是我的代码，但它没有按预期工作。

document
  .querySelectorAll(".main-nav > .main-nav-list")
  .forEach((element) => {
    element.setAttribute("class", `${element.className} hasChild top`);
    element.querySelectorAll("li > ul").forEach((subElement) => {
      subElement.setAttribute("class", `${subElement.className} hasChild sub`);
    });
  });

<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">
                       <li class="c"> <a href="/">Summer</a> </li>
                       <li class="c"> <a href="/">Winter</a> </li>
                       <li class="c"> <a href="/">All season</a> </li>
                       <li class="c"> <a href="/">Spring </a> </li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>
</nav>

我想获得解决此问题的指导。任何帮助将不胜感激！

提前致谢。

Answer 1

现在在下面的代码片段中，如果您检查一下，您可以看到所有 UL 都有一个唯一的 class 名称。我在该范围内创建了一个随机数，并在其后附加了一个字符串，使其成为 class name

var data = document
  .querySelectorAll(".main-nav .main-nav-list");
  
  data.forEach((element) => {
    element.setAttribute("class", `list_${parseInt(Math.random() * (1000 - 0) + 0)} hasChild top`);
    console.log(element.className);
  });

<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">
                       <li class="c"> <a href="/">Summer</a> </li>
                       <li class="c"> <a href="/">Winter</a> </li>
                       <li class="c"> <a href="/">All season</a> </li>
                       <li class="c"> <a href="/">Spring </a> </li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>
</nav>

Answer 2

如果您只想更改 UL，可以这样做

请注意 [...spread] 是可选的。较旧的 Edge 浏览器不支持 nodeList

上的 forEach

[...document.querySelectorAll(".main-nav ul")]
  .forEach((element,i) => {
    element.classList.add("hasChild", "top", `c${new Date().getTime()}`);
  });

<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">
            <li class="c"> <a href="/">Summer</a> </li>
            <li class="c"> <a href="/">Winter</a> </li>
            <li class="c"> <a href="/">All season</a> </li>
            <li class="c"> <a href="/">Spring </a> </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
</nav>

Answer 3

这是实现你想要的最简单的方法

var ul = document.querySelectorAll(".main-nav ul")
ul.forEach((each,i)=>{
    each.classList.add("ul-"+i)
})

Answer 4

const ulNode = document.querySelectorAll('.main-nav .main-nav-list')

ulNode.forEach((parent, i) => {
    for (let j = 0; j < parent.children.length; j++) {
        parent.children[j].classList.add(`ok-${i + 1}`)
        console.log(parent.children);
    }
});

<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">
                       <li class="c"> <a href="/">Summer</a> </li>
                       <li class="c"> <a href="/">Winter</a> </li>
                       <li class="c"> <a href="/">All season</a> </li>
                       <li class="c"> <a href="/">Spring </a> </li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>
</nav>

这对我有用。

如何为 ul 创建动态 class 名称？

How to create dynamic class names for ul?

html

javascript

html-lists