¿Cómo llevaré el producto con la misma categoría a una cadena o una matriz?
<ul> <li class="product_cat-category-1"></li> <li class="product_cat-category-3"></li> <li class="product_cat-category-2"></li> <li class="product_cat-category-5"></li> <li class="product_cat-category-1"></li> <li class="product_cat-category-2"></li> <li class="product_cat-category-3"></li> <li class="product_cat-category-5"></li> <li class="product_cat-category-4"></li> <li class="product_cat-category-1"></li> <li class="product_cat-category-2"></li> <li class="product_cat-category-3"></li> <li class="product_cat-category-4"></li> </ul>Lo que quiero exactamente es filtrarlos y agregarlos a un nuevo div para crear una animación filtrable usando GSAP. Esta es en realidad una página de producto de WordPress WooCommerce.
La última vez que creé una ventana emergente usando GSAP, usé algo llamado función split():
triggers.each(function(){ let listClassName = $(this).attr('class').split(' '); let revealClassName = String(listClassName[listClassName.indexOf(listClassName.find(element => element === 'dasrgsap__reveal-trigger')) + 1]); const sectionReveal = $('.dasrgsap__reveal-content.' + revealClassName); const colReveal = $('.dasrgsap__reveal-content.' + revealClassName + ' .et_pb_column'); }); El activador fue ( dasrgsap__reveal-trigger sandra ) y el contenedor de contenido emergente fue ( dasrgsap__reveal-container sandra ). Ambos recibieron dos clases separadas, lo que hizo más fácil dividirlos y acceder a ellos.
En este caso, los elementos de la lista de productos de WooCommerce tienen demasiadas clases, por lo que la única clase con la que puedo jugar para obtener una categoría específica es product_cat-'product-category' .
Quiero obtener una cadena o matriz de la misma categoría de producto, y quiero dividir product_cat- y category-1 y obtener una matriz de esa categoría, pero no puedo hacerlo.
¿Es esto posible?
Esto es solo una suposición, pero ¿es esto lo que buscabas?
$("li").each(function() { var category = $.makeArray( $(this) .attr("class") .slice( $(this).attr("class").indexOf("-") + 1, $(this).attr("class").length ) ); // console.log(category); var product = $.makeArray($(this) .attr("class") .slice(0, $(this).attr("class").indexOf("-"))) // console.log(category); var completeList = $.merge(product, category); console.log(completeList) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="product_cat-category-1"></li> <li class="product_cat-category-3"></li> <li class="product_cat-category-2"></li> <li class="product_cat-category-5"></li> <li class="product_cat-category-1"></li> <li class="product_cat-category-2"></li> <li class="product_cat-category-3"></li> <li class="product_cat-category-5"></li> <li class="product_cat-category-4"></li> <li class="product_cat-category-1"></li> <li class="product_cat-category-2"></li> <li class="product_cat-category-3"></li> <li class="product_cat-category-4"></li> </ul>https://jsfiddle.net/7xcpjr59/
Espero que ayude