¿Existe una forma sencilla de seleccionar todos los elementos de una clase, pero agruparlos por hermanos?
Por ejemplo:
<div class="main-div"> <div class="get-this"></div> <div class="get-this"></div> <div class="get-this"></div> <div class="sub-div"> <div class="get-this"></div> <div class="get-this"></div> </div> </div> <div class="get-this"></div> <div class="get-this"></div> <div class="get-this"></div> Si quisiera obtener todos los elementos de la clase get-this pero quisiera recorrer los elementos que son hermanos como en main-div , sub-div y fuera de cualquier div por separado sin asignar una clase separada. No puedo pensar en una buena manera de hacer esto sin atravesar todo el DOM.
Coloque sus elementos principales en un Conjunto, luego tome los elementos secundarios de cada padre.
const parents = new Set( [...document.querySelectorAll('.get-this')] .map(div => div.parentElement) ); const divs = [...parents].map( parent => [...parent.children].filter(child => child.matches('.get-this')) ); console.log(divs); <div class="main-div"> <div class="get-this"></div> <div class="get-this"></div> <div class="get-this"></div> <div class="sub-div"> <div class="get-this"></div> <div class="get-this"></div> </div> </div> <div class="get-this"></div> <div class="get-this"></div> <div class="get-this"></div>