Is there a simple way to select all elements of a class, but group them by siblings?
For example:
<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>
If I wanted to get all the elements of class get-this but wanted to loop through the elements that are siblings like in main-div, sub-div and outside of any div separately without assigning a separate class? I can't think of a good way to do this without traversing the entire DOM.
Put their parent elements into a Set, then take the children of each parent.
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>