How will I take product with same category into a string or an array?
<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>
What I want exactly is to filter them and append them into a new div to create a filterable animation using GSAP. This is actually a WordPress WooCommerce product page.
Last time I created a popup using GSAP, and in that I used something called split() function:
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');
});
The trigger was (dasrgsap__reveal-trigger sandra) and the popup content container was (dasrgsap__reveal-container sandra). Both were given two separate classes, which made it easier to split and access them.
In this case, WooCommerce product list items are given too many classes, so the only class I can play with to get a specific category is the product_cat-'product-category'.
I want to get a string or array of the same product category, and I want to split product_cat- and category-1 and get an array of that category, but I'm not able to do it.
Is this even possible?
This is only a guess but is this what you were after
$("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/
I hope it helps