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:
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 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>
</divI 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 class="product-view-item-colour-tags"><span class="product-view-item-colour-tag colour-tag-1">tag1</span><span class="product-view-item-colour-tag colour-tag-2">tag2</span><span class="product-view-item-colour-tag colour-tag-3">tag3</span><span class="product-view-item-colour-tag colour-tag-4">tag4</span><span class="product-view-item-colour-tag colour-tag-5">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 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>
<br><br><br>