Soy un novato en Javascript y he logrado copiar un conjunto de clases a cinco nuevos divs.
Sin embargo, me gustaría copiar una clase única que contenga una palabra en particular en un div específico.
Como:
Agradezco cualquier ayuda.
<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> </divHe creado un fragmento para resolver el problema. Para hacer que las cosas sean visibles, creé un CSS personalizado, que solo es útil para ver que la respuesta funcione, por supuesto, usará su propio CSS en su lugar. La idea que he estado aplicando era crear un objeto llamado classMap que consta de pares clave-valor, siendo las claves los nombres de clase que se agregarán y los valores los selectores donde queríamos que se agregaran. Luego, hice un bucle de este objeto por clave y lo apliqué a cada elemento representado por el selector en el valor de la clase representada por el nombre de clase en la clave.
$(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>