JavaScript实现：将含指定关键词的class复制到对应div

我是JavaScript新手，已经成功将一组类复制到五个新div中，但希望将包含特定关键词的唯一类分别复制到指定div：

• 将tag-street-style复制到.colour-tag-1
• 将tag-slender复制到.colour-tag-2
• 将tag-navy复制到.colour-tag-3
• 将tag-grey复制到.colour-tag-4
• 将tag-white复制到.colour-tag-5

以下是我目前的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready( function() { 
  $(".grid-item .grid-meta-wrapper").each(function(e){
    $(this).append('<div class="product-view-item-colour-tags"><span class="product-view-item-colour-tag colour-tag-1"></span><span class="product-view-item-colour-tag colour-tag-2"></span><span class="product-view-item-colour-tag colour-tag-3"></span><span class="product-view-item-colour-tag colour-tag-4"></span><span class="product-view-item-colour-tag colour-tag-5"></span></div>');
  });
  $(function() {
    $(".grid-item").each(function(e){
      var colourItemTag1 = $(this).attr('class');
      $(this).find('.colour-tag-1').addClass(colourItemTag1);
    });
    $(".grid-item").each(function(e){
      var colourItemTag2 = $(this).attr('class');
      $(this).find('.colour-tag-2').addClass(colourItemTag2);
    });
    $(".grid-item").each(function(e){
      var colourItemTag3 = $(this).attr('class');
      $(this).find('.colour-tag-3').addClass(colourItemTag3);
    });
    $(".grid-item").each(function(e){
      var colourItemTag4 = $(this).attr('class');
      $(this).find('.colour-tag-4').addClass(colourItemTag4);
    });
    $(".grid-item").each(function(e){
      var colourItemTag5 = $(this).attr('class');
      $(this).find('.colour-tag-5').addClass(colourItemTag5);
    });
  });
     });
     </script>

<div class="grid-item tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white is-loaded">
  <section class="grid-meta-wrapper">
    <div class="grid-main-meta">
      <div class="grid-title"> T-Shirt </div>
      <div class="grid-prices">
        <div class="product-price">
          <span>12.99</span>
        </div>
      </div>
    </div>
    <div class="grid-meta-status"></div>
  </section>
</div>

解决方案 #

当前代码的问题是把grid-item的所有类都批量添加到了每个colour-tag元素里，没有筛选出你需要的特定类。可以通过以下方式修改，让代码更简洁且满足需求：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function() { 
  // 插入标签容器
  $(".grid-item .grid-meta-wrapper").each(function(){
    $(this).append('<div class="product-view-item-colour-tags"><span class="product-view-item-colour-tag colour-tag-1"></span><span class="product-view-item-colour-tag colour-tag-2"></span><span class="product-view-item-colour-tag colour-tag-3"></span><span class="product-view-item-colour-tag colour-tag-4"></span><span class="product-view-item-colour-tag colour-tag-5"></span></div>');
  });

  // 定义目标类与对应元素的映射关系
  const tagTargetMap = [
    { sourceClass: 'tag-street-style', targetElement: '.colour-tag-1' },
    { sourceClass: 'tag-slender', targetElement: '.colour-tag-2' },
    { sourceClass: 'tag-navy', targetElement: '.colour-tag-3' },
    { sourceClass: 'tag-grey', targetElement: '.colour-tag-4' },
    { sourceClass: 'tag-white', targetElement: '.colour-tag-5' }
  ];

  // 遍历每个grid-item，添加指定类到对应元素
  $(".grid-item").each(function(){
    const $currentItem = $(this);
    tagTargetMap.forEach(item => {
      if ($currentItem.hasClass(item.sourceClass)) {
        $currentItem.find(item.targetElement).addClass(item.sourceClass);
      }
    });
  });
});
</script>

<div class="grid-item tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white is-loaded">
  <section class="grid-meta-wrapper">
    <div class="grid-main-meta">
      <div class="grid-title"> T-Shirt </div>
      <div class="grid-prices">
        <div class="product-price">
          <span>12.99</span>
        </div>
      </div>
    </div>
    <div class="grid-meta-status"></div>
  </section>
</div>

代码说明 #

1. 映射关系管理：用tagTargetMap数组统一维护类和目标元素的对应关系，后续修改规则只需调整这个数组，不用重复写遍历逻辑；
2. 性能优化：只遍历一次grid-item，内部遍历映射关系，避免多次重复操作DOM；
3. 精准匹配：通过hasClass判断当前元素是否包含目标类，确保只有存在该类时才添加到对应标签元素中。

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