如何提取WooCommerce同分类产品为数组/字符串实现GSAP筛选动画

该需求可直接实现，无需依赖固定类名顺序，通过前缀匹配即可精准提取产品分类标识，兼容WooCommerce输出的多冗余类名场景。

核心实现思路 #

• 遍历所有产品列表项，从元素类名列表中过滤出带product_cat-前缀的分类类名
• 以分类标识为key，将同分类产品DOM归集为统一集合
• 动态生成分类容器，将对应分类产品追加到容器中，基于容器绑定GSAP动画逻辑

核心实现代码 #

以下代码和你原有jQuery风格的GSAP逻辑完全兼容，可直接复用：

// 初始化分类存储对象
const productGroups = {};
// 遍历所有带产品分类类名的列表项
$('ul li[class*="product_cat-"]').each(function() {
  const $product = $(this);
  // 拆分当前元素所有类名，用正则匹配空白字符适配多空格、换行场景
  const classList = $product.attr('class').split(/\s+/);
  // 筛选出带product_cat-前缀的分类类名，不受类名顺序、其他冗余类名影响
  const catClass = classList.find(cls => cls.startsWith('product_cat-'));
  if (!catClass) return;
  // 提取纯分类标识，例如从product_cat-category-1中提取category-1
  const catKey = catClass.replace('product_cat-', '');
  // 将当前产品存入对应分类的集合中
  if (!productGroups[catKey]) {
    productGroups[catKey] = $();
  }
  productGroups[catKey] = productGroups[catKey].add($product);
});

代码执行完成后，productGroups对象会存储所有分类对应的产品jQuery集合，例如productGroups['category-1']就是分类1下所有产品的DOM集合，可直接用于后续动画逻辑。

以下是容器创建、GSAP动画绑定的参考示例：

// 在原有产品列表后方创建动画容器挂载节点
const $animationWrap = $('<div class="gsap-filter-container"></div>').insertAfter('ul');
// 遍历分类集合，生成对应分类容器
Object.keys(productGroups).forEach(catKey => {
  // 创建分类容器，绑定分类标识方便筛选控制
  const $catContainer = $(`<div class="cat-group cat-${catKey}" data-cat="${catKey}"></div>`);
  // 根据动画需求选择节点处理方式：
  // 1. 做显隐筛选：用clone()复制节点，保留原列表结构
  // 2. 做重排/飞入动画：直接append原节点，配合GSAP FLIP插件实现位置变换
  productGroups[catKey].clone().appendTo($catContainer);
  $catContainer.appendTo($animationWrap);
  // 初始化GSAP初始状态
  gsap.set($catContainer, { opacity: 0, y: 20 });
});

// 示例：筛选按钮点击触发分类切换动画
$('.filter-btn').on('click', function() {
  const targetCat = $(this).data('target-cat');
  // 非目标分类淡出
  gsap.to('.cat-group:not(.cat-' + targetCat + ')', { opacity: 0, y: 20, duration: 0.3 });
  // 目标分类带错落效果淡入
  gsap.to('.cat-' + targetCat, { opacity: 1, y: 0, duration: 0.3, stagger: 0.1 });
});

优化提示 #

• 不要用固定索引值取类名，WooCommerce会根据产品状态、插件挂载情况增减类名，固定索引的写法很容易随版本更新失效
• 分类匹配逻辑不需要写复杂的字符串循环截取，startsWith()方法可直接完成前缀判断，兼容所有WordPress站点默认支持的浏览器范围
• 如果要实现更复杂的筛选转场效果，可直接基于归集好的productGroups对象做逻辑扩展，不需要重复遍历DOM取分类

内容的提问来源于stack exchange，提问作者Tarun