实现父div中tag-前缀类自动批量复制到子span的JS需求

直接上可复用的代码，完美适配任意带5个tag-前缀类的父div：

// 替换成你实际的父div选择器，比如用特定类名更高效
const parentDivs = document.querySelectorAll('div');

parentDivs.forEach(parent => {
  // 提取父元素中所有tag-开头的类，保留DOM中的原始顺序
  const tagClasses = Array.from(parent.classList).filter(cls => cls.startsWith('tag-'));
  
  // 依次映射到colour-tag-1到colour-tag-5的span
  for (let index = 0; index < 5; index++) {
    const targetSpan = parent.querySelector(`.colour-tag-${index + 1}`);
    if (targetSpan && tagClasses[index]) {
      // 清理span上旧的tag类（如果有）
      const oldTag = targetSpan.classList.value.match(/tag-\w+/);
      if (oldTag) targetSpan.classList.remove(oldTag[0]);
      // 添加新的tag类
      targetSpan.classList.add(tagClasses[index]);
    }
  }
});

关键逻辑说明 #

• 动态提取tag类：用filter从父div的类列表里筛出所有tag-开头的类，完全不依赖固定类名，不管父div的tag类是tag-red还是tag-large都能识别。
• 按序映射：严格按照tag类在父div中的出现顺序，对应到colour-tag-1到colour-tag-5的span，保证顺序一致。
• 自动清理旧类：每次添加新tag类前，先移除span上已有的旧tag类，避免类名堆积。

优化建议 #

• 把document.querySelectorAll('div')改成更精准的选择器，比如你的父div都有tag-container类的话，就写成document.querySelectorAll('.tag-container')，减少不必要的遍历。
• 如果需要支持更多/更少tag类，只需调整循环的次数（把5改成对应数字）。

内容的提问来源于stack exchange，提问作者Houghtonator