分组和折叠<a>javascript中按类划分的元素

Question

这个问题让我很忙。

我有一组标签，像下面

<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>

我需要做的是从上面开始，并按类将元素分组在一起，以便我可以向元素添加折叠。所以最终的结果应该是这样的:

<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>

我已经尝试过JS脚本与音调的变量，这是真的黑客和不工作。有没有一种简单而干净的方法来做到这一点?

谢谢。

Answer 1

你可以这样做

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>

Answer 2

我会在附加元素之前对它们进行分组，以便更好地控制每个单独的元素

这样你可以添加一个+到第一个子OP建议

• 获取所有元素
• 在className上分组
• 对于每个部分，创建一个div，其中appendChild所有<a>
• 添加<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>