Estoy tratando de acceder a todos los elementos secundarios de un contenedor. Creé una clase ES6 para esto. Necesito un enfoque de clase según los requisitos de mi proyecto. Mi objetivo es que, cuando hago clic en cualquier elemento secundario, se deben seleccionar todos los elementos secundarios. Como ejemplo ahora, di un borde rojo a todos los elementos secundarios cuando hago clic en cualquier elemento secundario. Si ve mi código, la siguiente línea es lo principal. Necesito ayuda let children = parent.querySelectorAll(".child"); ahora usé la clase .child aquí. Pero, ¿cómo puedo usar esto this.children aquí. La línea completa debería ser así let children = parent.querySelectorAll(this.children); . Cómo puedo conseguir esto. Mi código es el siguiente. Si consigo esto, será muy útil. Espera que alguien pueda ayudarme en eso. ¡Gracias de antemano!
class Selector{ constructor(parents, children) { this.parents= document.querySelectorAll(parents); this.children= document.querySelectorAll(children); this.selectall=()=>{ this.children.forEach((elem)=>{ elem.addEventListener("click",(e)=>{ let parent = e.target.parentElement; let children = parent.querySelectorAll(".child"); children.forEach((elem)=>{elem.style.border="2px solid red"}); }) }) } } } let one = new Selector(".parent",".child"); one.selectall(); .parent {font-family:Arial, Helvetica, Sans-serif;} <ul class="parent"> <li class="child">One</li> <li class="child">Two</li> <li class="child">Three</li> </ul> <ul class="parent"> <li class="child">One</li> <li class="child">Two</li> <li class="child">Three</li> </ul>Solución 1 (si parent tiene todos los niños con clase child ):
En vez de
let children = parent.querySelectorAll(".child");Prueba esto
let children = Array.from(parent.children); Solución 2 (si parent tiene hijos con una clase diferente a la de child )
Guarde la clase secundaria también.
class Selector { constructor(parents, children) { this.parents = document.querySelectorAll(parents); this.childrenClass = children; this.children = document.querySelectorAll(children); this.selectall = () => { this.children.forEach((elem) => { elem.addEventListener("click", (e) => { let parent = e.target.parentElement; let children = parent.querySelectorAll(this.childrenClass); children.forEach((elem) => { elem.style.border = "2px solid red"; }); }); }); }; } } let one = new Selector(".parent", ".child"); one.selectall();