Javascript - how to copy attribute class that contains a specific word to another div?-CodePudding

I am a novice in Javascript and I have succeeded in copying a set of classes to five new divs.

However, I would like to copy a unique class that contains a particular word to a specific div.

Such as:

Copy tag-street-style to .colour-tag-1
Copy tag-slender to .colour-tag-2
Copy tag-navy to .colour-tag-3
Copy tag-grey to .colour-tag-4
Copy tag-white to .colour-tag-5

I appreciate any assistance.

<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 ><span ></span><span ></span><span ></span><span ></span><span ></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 >
  <section >
    <div >
      <div > T-Shirt </div>
      <div >
        <div >
          <span>12.99</span>
        </div>
      </div>
    </div>
    <div ></div>
  </section>
</div

CodePudding user response：

I have created a snippet to solve the issue. To make things visible, I created some custom CSS, which is only useful for the purpose of seeing that the answer works, of course, you will use your own CSS instead. The idea I have been applying was to create an object called classMap which consists of key-value pairs, the keys being the class names to be added and the values being the selectors where we wanted them to be added. Then, I looped this object by key and applied to each element represented by the selector in the value the class represented by the class name in the key.

$(document).ready( function() { 
  $(".grid-item .grid-meta-wrapper").each(function(e){
    $(this).append('<div ><span >tag1</span><span >tag2</span><span >tag3</span><span >tag4</span><span >tag5</span></div>');
  });
  let classMap = {
    "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",
  };
    
  for (let cls in classMap) {
      document.querySelector(classMap[cls]).classList.add(cls);
  }
});

.tag-street-style {
    background-color: purple;
}

.tag-slender {
    background-color: red;
}

.tag-navy {
    background-color: blue;
}

.tag-grey {
    background-color: grey;
}

.tag-white {
    background-color: black;
    color: white;
}

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

<div >
  <section >
    <div >
      <div > T-Shirt </div>
      <div >
        <div >
          <span>12.99</span>
        </div>
      </div>
    </div>
    <div ></div>
  </section>
</div>
<br><br><br>