如何用JavaScript将含find-me类的元素按其余相同类名分组？

云上老周

2026-6-30

实现方法

核心思路是用元素的完整类名集合（排序后生成唯一键）作为分组标识——因为类名的定义顺序不影响元素的类归属，排序后能保证相同类集合的元素生成一致的键，避免因类名顺序差异导致分组错误。

具体代码实现

// 获取所有带find-me类的元素，转成数组方便操作
const elements = Array.from(document.querySelectorAll('.find-me'));

// 创建分组容器，键为排序后的类名字符串，值为对应元素数组
const groups = {};

elements.forEach(element => {
  // 获取元素的类列表，转成数组后排序，消除类名顺序的影响
  const classNames = Array.from(element.classList).sort();
  // 生成唯一的分组键
  const groupKey = classNames.join(' ');
  
  // 将元素归入对应分组
  if (!groups[groupKey]) {
    groups[groupKey] = [];
  }
  groups[groupKey].push(element);
});

// 可选：输出分组结果用于验证
Object.entries(groups).forEach(([key, elements]) => {
  console.log(`分组类名：${key}`);
  console.log('包含元素：', elements);
});

代码说明

筛选目标元素：通过document.querySelectorAll('.find-me')精准获取所有需要处理的元素，转成数组是为了方便使用forEach等数组遍历方法。
生成稳定分组键：把元素的classList转成数组后排序，再拼接成字符串——比如元素类名是find-me two one，排序后会变成find-me one two，和类顺序为find-me one two的元素生成完全相同的键，确保同组元素被正确归类。
构建分组集合：遍历元素时，根据分组键将元素存入对应数组，最终groups对象的每个属性值就是一个完整的元素分组。