如何用JavaScript按类分组并折叠<a>元素

问题描述 #

现有一组<a>标签：

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

需要将这些元素按类分组，每个组用class='collapse'的<div>包裹，最终效果如下：

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

此前尝试编写的JavaScript代码因变量过多、结构杂乱无法正常运行，需要简洁清晰的实现方案。

简洁实现方案 #

基础分组实现 #

使用Map进行分组，逻辑清晰且代码简洁：

// 选中所有目标<a>标签（选择器可根据实际需求调整）
const links = document.querySelectorAll('a[class^="c"]');
// 用Map存储每个类对应的元素集合
const classGroups = new Map();

// 遍历元素完成分组
links.forEach(link => {
  const cls = link.className;
  if (!classGroups.has(cls)) {
    classGroups.set(cls, []);
  }
  classGroups.get(cls).push(link);
});

// 遍历分组创建折叠容器并插入DOM
classGroups.forEach((elements) => {
  const collapseContainer = document.createElement('div');
  collapseContainer.className = 'collapse';
  // 将同组元素移入容器
  elements.forEach(el => collapseContainer.appendChild(el));
  // 将容器插入到原元素的父节点（假设所有<a>标签同属一个父元素）
  elements[0].parentElement.appendChild(collapseContainer);
});

保持分组顺序的实现 #

如果需要按类名顺序（如c1→c2→c3）排列分组，可以先对类名排序：

// 选中所有目标<a>标签
const links = document.querySelectorAll('a[class^="c"]');
// 提取唯一类名并排序
const sortedClasses = [...new Set(Array.from(links).map(link => link.className))].sort();

// 遍历排序后的类名创建分组
sortedClasses.forEach(cls => {
  const elements = Array.from(links).filter(link => link.className === cls);
  const collapseContainer = document.createElement('div');
  collapseContainer.className = 'collapse';
  
  elements.forEach(el => collapseContainer.appendChild(el));
  elements[0].parentElement.appendChild(collapseContainer);
});

代码说明 #

• 选择器a[class^="c"]用于匹配类名以c开头的标签，可根据实际类名规则修改
• 使用Map或排序后的类名数组实现分组，避免冗余变量
• 通过appendChild移动元素到新容器，无需重复创建元素，保证DOM结构简洁