I want to achieve the result that each ul should have different/dynamic class names and it should be unique. Below is my code but its not working as per the expectation.
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>I would like to have guidance to resolve this. Any help will be appreciated!
Thanks in advance.
this is the most simple way to achive what you want
var ul = document.querySelectorAll(".main-nav ul")
ul.forEach((each,i)=>{
each.classList.add("ul-"+i)
})
Now in the below snippet if you check, you can see all the UL has a unique class name. I created a random number in the range and appending that with a string to make as 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>If you only want to change the ULs you can do this
Note the […spread] is optional. Older Edge browsers do not support forEach on a nodeList
[...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>