0
204
ViewsCómo agregar diferentes clases en cada nivel de ul li usando javascript
Estoy tratando de obtener diferentes clases para cada ul li como se menciona a continuación en el código. El código que he probado hasta ahora está en jQuery, pero necesito que esto se logre en Vanilla Javascript
¡Cualquier ayuda será apreciada!
const topLevel = Array.from(document.querySelector(".main-nav-list > li > ul")) .map(({ parentElement }) => parentElement); for (const element of topLevel) { element.setAttribute(`${element.className} hasChild top`); const subLevel = Array.from(element.querySelectorAll("li > ul")) .map(({ parentElement }) => parentElement); for (const subElement in subLevel) { subElement.setAttribute(`${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> 
·
Juan Pablo Isaza
1 answers
Answer question0
Así es como podría lograr esto en Vanilla JavaScript, los detalles son un poco complicados y realmente no encajan en una respuesta, porque cada uno de estos métodos utilizados aquí y los jQuery que utilizó sobre todo tienen comportamientos y fondos específicos que se explican con más detalle en las respectivas documentaciones :
const topLevel = Array.from(document.querySelector(".main-nav-list > li > ul")) .map(({parentElement}) => parentElement); for (const element of topLevel) { element.setAttribute(`${element.className} hasChild top`); const subLevel = Array.from(element.querySelectorAll("li > ul")) .map(({parentElement}) => parentElement); for (const subElement of subLevel) { subElement.setAttribute(`${subElement.className} hasChild sub`); } }
·
Juan Pablo Isaza
Report
Answer question