Quiero lograr el resultado de que cada ul debe tener nombres de clase diferentes/dinámicos y debe ser único. A continuación se muestra mi código, pero no funciona según las expectativas.
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>Me gustaría tener orientación para resolver esto. ¡Cualquier ayuda será apreciada!
Gracias por adelantado.
esta es la forma más sencilla de lograr lo que quieres
var ul = document.querySelectorAll(".main-nav ul") ul.forEach((each,i)=>{ each.classList.add("ul-"+i) })Ahora, en el siguiente fragmento, si marca, puede ver que todas las UL tienen un nombre de clase único. Creé un número aleatorio en el rango y lo agregué con una cadena para hacer como nombre de clase
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>Si solo desea cambiar las UL, puede hacerlo
Tenga en cuenta que […spread] es opcional. Los navegadores Edge más antiguos no admiten forEach en una lista de nodos
[...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>