¿Cómo puedo usar la variable con document.querySelectorAll para seleccionar todos los elementos secundarios <li> directos? Me gustaría seleccionar la etiqueta directa <li> del elemento main-navigation > ul y darle un borde rojo. Sé que se puede arreglar usando let firstLevelLi = document.querySelectorAll(".main-navigation > ul > li"); . Pero estoy buscando una solución con variable de la siguiente manera.
let parent = document.querySelector(".main-navigation > ul"); let li = document.querySelectorAll("`${parent}` > ul > li");Necesito esto para usar junto con una función OOP. No menciono mi código OOP aquí, ya que puede confundir a todos. Es por eso que lo reduje así para abordar el problema central. Mi código es el siguiente. Espero que alguien pueda ayudarme. ¡Gracias de antemano!
let parent = document.querySelector(".main-navigation > ul"); let li = document.querySelectorAll("`${parent}` > ul > li"); li.forEach((el)=>{ el.style.border="2px solid red"; }); ul {list-style:none;padding:0;margin:0;font-family:arial;} ul ul {padding-left:1rem;} li {padding:.35rem;} <div class="main-navigation"> <ul> <li><a href="">Home</a></li> <li><a href="">About +</a> <ul> <li><a href="#">Vision</a></li> <li><a href="#">Mission</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </div>Puede usar "padre" en lugar de "documento" en:
let li = parent.querySelector("ul").querySelectorAll('li'); En su caso, debe separar la operación en dos consultas en lugar de una, ya que cada uno de los elementos de la lista en su código de ejemplo es, de alguna manera, parte de un elemento ul, por lo que ul > li en realidad los seleccionará a todos.
let li = parent.querySelectorAll("ul > li"); // this will not work as you wantSi espera que haya varios ul secundarios, puede seleccionarlos todos, luego continuar y seleccionar sus elementos de la lista.
let li = []; parent.querySelectorAll("ul").forEach(ul => { li = [...li, ...ul.querySelectorAll('li')]; });Aquí está el código completo:
let parent = document.querySelector(".main-navigation > ul"); let li = parent.querySelector("ul").querySelectorAll('li'); li.forEach((el)=>{ el.style.border="2px solid red"; }); ul {list-style:none;padding:0;margin:0;font-family:arial;} ul ul {padding-left:1rem;} li {padding:.35rem;} <div class="main-navigation"> <ul> <li><a href="">Home</a></li> <li><a href="">About +</a> <ul> <li><a href="#">Vision</a></li> <li><a href="#">Mission</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </div>Puede usar el nombre de etiqueta del parent dentro de querySelectorAll :
let parent = document.querySelector('.main-navigation') let li = document.querySelectorAll(`${parent.tagName} > ul > li`) li.forEach(el => { el.style.border = '2px solid red' }) ul { list-style: none; padding: 0; margin: 0; font-family: arial; } ul ul { padding-left: 1rem; } li { padding: 0.35rem; } <div class="main-navigation"> <ul> <li><a href="#">Home</a></li> <li> <a href="#">About +</a> <ul> <li><a href="#">Vision</a></li> <li><a href="#">Mission</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </div>