javascript - jQuery:循环遍历元素以创建组合变体

Question

前提一个具有变体的电子商务系统。

此问题中使用的示例 HTML 标记。

<div class = "variationType" data-variation-type = "size">
    <h3>Colour</h3>
    <div class = "variation" data-variation-type = "size"> small </div>
    <div class = "variation" data-variation-type = "size"> large </div>
</div>

<div class = "variationType" data-variation-type = "colour">
    <h3>Colour</h3>
    <div class = "variation" data-variation-type = "colour"> red </div>
    <div class = "variation" data-variation-type = "colour"> blue </div>
</div>

<div class = "variationType" data-variation-type = "material">
    <h3>Material</h3>
    <div class = "variation" data-variation-type = "material"> stone </div>
    <div class = "variation" data-variation-type = "material"> wood </div>
</div>

我需要做的是循环遍历上述每种变体类型和变体名称，以创建所有可能的变体组合列表(每种变体类型至少有一个变体)。如果只有两种变体类型，这很简单，但我也需要它来处理 3+。

我的想法是我需要以某种方式实现路径算法来遍历每个变体类型并创建唯一列表，但我不知道该怎么做。

为了获得可能变化的总量，我正在执行以下操作。

// figure out how many variations there needs to be
var totalPathsToTake = 0;
var totalPathsTaken = 0;
jQuery('.variationType').each(function(i) {
    var variationType = jQuery(this).attr("data-variation-type");
    var totalVariationsInType = jQuery('.variation[data-variation-type="' + variationType + '"]').length;

    if(totalPathsToTake == 0){
        totalPathsToTake = totalPathsToTake + totalVariationsInType;
    } else {
        totalPathsToTake = totalPathsToTake * totalVariationsInType;
    }
});
console.log("total variations " + totalPathsToTake)

所以上面的代码会返回8，这是正确的。

问题是，现在怎么办？我将如何着手创建这些变体？非常感谢任何帮助或建议!

Answer 1

据我了解，你想要的是 div.variations 的所有排列。

实现此目的的一种方法是认识到，当我们排列一种变体类型时，我们总是在重复使用它后面的变体类型的排列。这有助于像这样的递归实现:

// make an array of variation types, and each entry is the list of possible values
const all = $('.variationType').map((i, el) => $('.variation', el)).toArray();

// recursive function, return all permutations of values for a array of variation types
function permute_variations(arr) {
  // base case of no variation types
  if (arr.length < 1)
    return [];
  // base case of a single variation type
  if (arr.length === 1)
    return arr[0].toArray();

  // recurse by getting the permutations of the following variation types
  const inner_arr = permute_variations(arr.slice(1));
  // now permute all values for this type with the permutations that we got
  return arr[0].map((i, v0) => inner_arr.map(e => [v0].concat(e))).toArray();
}

const result = permute_variations(all);
console.log(`Number of permutations: ${result.length}`);
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="variationType" data-variation-type="size">
  <h3>Colour</h3>
  <div class="variation" data-variation-type="size"> small </div>
  <div class="variation" data-variation-type="size"> large </div>
</div>

<div class="variationType" data-variation-type="colour">
  <h3>Colour</h3>
  <div class="variation" data-variation-type="colour"> red </div>
  <div class="variation" data-variation-type="colour"> blue </div>
</div>

<div class="variationType" data-variation-type="material">
  <h3>Material</h3>
  <div class="variation" data-variation-type="material"> stone </div>
  <div class="variation" data-variation-type="material"> wood </div>
</div>

结果是一个 div.variation 元素的三元组数组，您可以随意处理它。

注意:请注意 Array map() 方法和 jQuery map() 方法之间的区别，因为您可以看到它们以相反的顺序使用索引和元素参数调用 lambda 函数。