使用jQuery遍历元素生成电商商品组合变体的实现方案

我来给你详细讲讲怎么用jQuery搞定这个电商变体组合的需求，结合你提供的HTML结构，咱们一步步来实现：

1. 提取变体分组数据 #

首先咱们要从DOM里把不同类型的变体（比如尺寸、颜色）和对应的选项提取出来，用jQuery的遍历方法就能轻松做到：

// 存储所有变体分组：键是变体类型，值是该类型的所有选项数组
let variationGroups = {};

// 遍历每个变体类型容器
$('.variationType').each(function() {
  // 获取当前变体类型（以data属性为准，比h3文本更可靠）
  const type = $(this).data('variation-type');
  // 收集当前类型下的所有变体选项文本
  const options = $(this).find('.variation').map(function() {
    return $(this).text().trim();
  }).get();
  
  // 把类型和选项存入对象
  if (options.length > 0) {
    variationGroups[type] = options;
  }
});

注意：你给的示例HTML里第一个.variationType的<h3>写的是Colour但data-variation-type是size，实际开发中应该以data属性的标识为准，上面的代码也是这么处理的，避免文本不一致导致的错误。

2. 实现笛卡尔积生成所有组合 #

要生成所有可能的变体组合，本质上是计算多个数组的笛卡尔积，咱们写一个通用的工具函数来处理：

// 计算多个数组的笛卡尔积
function cartesianProduct(groups) {
  // 把变体分组转换成[[类型1选项], [类型2选项], ...]的格式
  const groupArrays = Object.values(groups);
  // 初始结果数组
  let result = [[]];
  
  for (const group of groupArrays) {
    const temp = [];
    // 遍历现有结果和当前组的每个选项，组合成新的数组
    for (const prev of result) {
      for (const option of group) {
        temp.push([...prev, option]);
      }
    }
    result = temp;
  }
  
  // 把结果转换成带类型标识的对象数组（更易读）
  const typeKeys = Object.keys(groups);
  return result.map(combination => {
    const comboObj = {};
    combination.forEach((val, index) => {
      comboObj[typeKeys[index]] = val;
    });
    return comboObj;
  });
}

3. 生成并使用变体组合 #

现在把前面两步结合起来，生成所有组合，你可以选择输出到控制台调试，或者渲染到页面上展示给用户：

// 生成所有变体组合
const allVariations = cartesianProduct(variationGroups);

// 示例1：输出到控制台查看结果
console.log('所有商品变体组合：', allVariations);

// 示例2：把组合渲染到页面上（假设页面有个id为variationResults的容器）
const $results = $('#variationResults');
allVariations.forEach((combo, index) => {
  let comboText = `组合${index+1}：`;
  for (const [type, option] of Object.entries(combo)) {
    comboText += `${type}: ${option} | `;
  }
  // 去掉最后多余的" | "
  comboText = comboText.slice(0, -3);
  $results.append(`<p>${comboText}</p>`);
});

完整运行效果 #

针对你给的示例HTML（假设第二个.variationType的data-variation-type是colour，且有red、blue选项），生成的组合会是：

组合1：size: small | colour: red
组合2：size: small | colour: blue
组合3：size: large | colour: red
组合4：size: large | colour: blue

这样就完美实现了从DOM提取变体数据，再生成所有可能的商品组合的需求啦！

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