Get all elements of class but group by siblings

user_3471144 0
Viewed 35

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.

jquery javascript
1 Answers

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>

user_95152070
Related