Tengo dos cuadros de navegación donde el primero tiene una clase CSS .one y el segundo está en blanco. Para el primer cuadro de navegación, le di un borde con JavaScript al detectar el nombre de la clase .one . Pero también obtengo un borde para el segundo cuadro de navegación aunque no tenga una clase. Aquí uso el enfoque de literales de plantilla. Sé que puedo arreglar esto usando el nombre de la clase directamente dentro del método querySelectorAll de la siguiente manera let li = document.querySelectorAll(".one > ul li"); . Pero necesito una solución de literales de plantilla que es más útil para mí para usar otros proyectos también. Principalmente necesito representar el nombre de la clase como una variable. El siguiente es mi código. Puede alguien ayudarme con esto. ¡Gracias de antemano!
let parents = document.querySelector(".one"); let li = document.querySelectorAll(`${parents.tagName} > ul li`); li.forEach((elem)=>{elem.style.border="1px solid red"}); nav {font-family:arial;width:15rem;} nav ul {list-style:none;padding:0;margin:1rem;padding-left:.5rem;} nav ul a {color:#777;text-decoration:none;padding:.5rem;} <nav class="one"> <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> </nav> <br> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>Intenta reemplazar esta línea:
let li = document.querySelectorAll(`${parents.tagName} > ul li`);Con este:
let li = parents.querySelectorAll(`ul li`); La razón por la que no funciona para usted como esperaba es porque está haciendo coincidir todos los elementos con el selector de consulta nav > ul li dentro del document , y está ignorando por completo el nombre de clase de la etiqueta de nav que ha seleccionado en los parents variable.
De lo contrario, simplemente puede hacer esto en su lugar:
let li = document.querySelectorAll(`.one > ul li`); li.forEach((elem)=>{elem.style.border="1px solid red"});o simplemente usa el CSS:
.one > ul li { border: 1px solid red; }o si desea seleccionar el primer elemento (no sé cuáles son sus intenciones, pero supongo que según su código):
.one:first-child > ul li { border: 1px solid red; }No necesita JavaScript. Puede ser posible solo con CSS.
.one > ul > li { border: 1px solid red}o en su cambio JS
let li = document.querySelectorAll(`${parents.tagName} > ul > li`);