如何用JavaScript遍历多个cardTags父元素并修改子tag元素背景色

核心问题是原有代码仅能获取单个cardTags容器，只需改成遍历所有容器并逐个处理内部标签即可解决。

修正后的代码示例 #

// 获取页面上所有class为cardTags的父容器
const allCardTagsContainers = document.querySelectorAll('.cardTags');

// 遍历每个cardTags容器
allCardTagsContainers.forEach(container => {
  // 在当前容器内查找所有class为tag的子元素
  const tags = container.querySelectorAll('.tag');
  
  tags.forEach(tag => {
    // 清除文本两端空白，避免空格影响判断
    const tagContent = tag.textContent.trim();
    
    // 根据标签文本设置对应背景色
    switch(tagContent) {
      case '前端':
        tag.style.backgroundColor = '#e1f5fe';
        break;
      case '后端':
        tag.style.backgroundColor = '#f3e5f5';
        break;
      case '测试':
        tag.style.backgroundColor = '#e8f5e9';
        break;
      case '设计':
        tag.style.backgroundColor = '#fff3e0';
        break;
      // 可根据需求继续添加更多标签规则
      default:
        tag.style.backgroundColor = '#f5f5f5'; // 默认背景色
    }
  });
});

代码说明 #

1. 获取所有容器：用document.querySelectorAll('.cardTags')替代原有querySelector，能获取页面上所有匹配的cardTags父div，而非仅第一个。
2. 分层遍历：外层循环遍历每个cardTags容器，内层循环处理当前容器内的所有tag元素，确保每组标签独立处理，不会跨容器干扰。
3. 文本去空白：trim()处理标签文本，避免因标签内的空格、换行导致判断失效。

优化方案（标签类型较多时） #

如果需要处理的标签类型很多，用对象映射替代switch会更简洁易维护：

// 定义标签文本与背景色的映射关系
const tagColorMap = {
  '前端': '#e1f5fe',
  '后端': '#f3e5f5',
  '测试': '#e8f5e9',
  '设计': '#fff3e0',
  '产品': '#e0f2f1'
};

const allCardTagsContainers = document.querySelectorAll('.cardTags');

allCardTagsContainers.forEach(container => {
  container.querySelectorAll('.tag').forEach(tag => {
    const tagContent = tag.textContent.trim();
    // 从映射表取颜色，没有匹配则用默认色
    tag.style.backgroundColor = tagColorMap[tagContent] || '#f5f5f5';
  });
});

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