This question made my mind really busy.

I have a set of tags like below

<a class='c1'>1</a>
<a class='c2'>2</a>
<a class='c3'>3</a>
<a class='c1'>4</a>
<a class='c1'>5</a>
<a class='c3'>6</a>
<a class='c2'>7</a>

What I need to do is to start from above and group elements together by class so that I can add a collapse to the elements. so the final results should be like this:

<div class='collapse'>
 <a class='c1'>1</a>
 <a class='c1'>4</a>
 <a class='c1'>5</a>
</div>
<div class='collapse'>
 <a class='c2'>2</a>
 <a class='c2'>7</a>
</div>
<div class='collapse'>
 <a class='c3'>3</a>
 <a class='c3'>6</a>
</div>

I have tried JS scripts with tones of variable that is really hacky and does not work. Is there a simple and clean way to do this?

thanks.

CodePudding user response：

You can do it this way

for(let i = 1; i<=3; i  ){
    let tags = document.querySelectorAll(`.c${i}`);
    let div = document.createElement('div');
        div.classList = 'collapse';
    tags.forEach(tag =>{
        div.appendChild(tag);
    });
    document.body.appendChild(div);
}

/* CSS just to demonstrate */
.collapse {
  margin-block: 1rem;
  border: blue solid 3px;
  display:flex;
  flex-direction: column;
}

<a class='c1'>1</a>
<a class='c2'>2</a>
<a class='c3'>3</a>
<a class='c1'>4</a>
<a class='c1'>5</a>
<a class='c3'>6</a>
<a class='c2'>7</a>

CodePudding user response：

I'd group them before appending to get more control over each separate element

This way you can eg add an to the first child as OP suggested

• Get all the elements
• Group them on className
• For each part, create a div where you appendChild all the <a>'s
• Append the <div>

const all = [ ...document.querySelectorAll('a') ].reduce((p, c) => {
    (p[c.className] = p[c.className] || []).push(c);
    return p;
}, {});

for (let groupKey in all) {
    var e = document.createElement('div');
    e.classList.add('collapse');
    
    // Optionally: Add ' ' to first child
    all[groupKey][0].innerHTML  = '  ';
    
    all[groupKey].forEach(ee => e.appendChild(ee));
    document.body.append(e)
}

.collapse { border: 1px solid red; display: flex; flex-direction: column; }

<a class='c1'>1</a>
<a class='c2'>2</a>
<a class='c3'>3</a>
<a class='c1'>4</a>
<a class='c1'>5</a>
<a class='c3'>6</a>
<a class='c2'>7</a>