在Javascript / jQuery中基于选项网格创建递归函数

Creating a recursive function in Javascript / jQuery based on an option grid

本文关键字：选项 网格 递归函数 创建 于选项 Javascript jQuery      更新时间：2023-09-26

我正在尝试从选择列表中生成选项所需的图像列表。

我可以这样做:

var imagesNeeded = [];
$('.woodStyles .optionLabel').each(function(index) {
    var woodStyle = $(this).html();
    $('.grainStyles').find('.optionLabel').each(function(index) {
        var grainStyle = $(this).html();
        imagesNeeded.push(grainStyle+woodStyle);
    });
});
console.log(imagesNeeded);
正如你所看到的，上面的代码本质上是递归的，我要做的是创建一个像这样的数组:

var options = ['grainStyles', 'woodStyles'];

和上面的代码做同样的事情，但是使用递归函数，这样我就可以从无限数量的选项中生成所需的图像列表。

我试着从很多方面去理解这件事，但我还是不明白。

如果我创建一个这样的数组:var options = ['grainStyles', 'woodStyles', 'finishTypes'];

递归函数需要做与下面代码相同的事情:

var imagesNeeded = [];
$('.woodStyles .optionLabel').each(function(index) {
    var woodStyle = $(this).html();
    $('.grainStyles').find('.optionLabel').each(function(index) {
        var grainStyle = $(this).html();
        $('.finishTypes').find('.optionLabel').each(function(index) {
            var finishType = $(this).html();
            imagesNeeded.push(grainStyle+woodStyle+finishType);
        });
    });
});
console.log(imagesNeeded);

听起来好像您有许多选项列表，而您想要生成一个包含所有选项排列的列表。

这可以递归地完成，如下所示: 
function getImagesNeeded(options) {
  if(options.length == 0) return [""];
  var thisClass = options[0];
  var imagesNeeded = [];
  $('.' + thisClass + ' .optionLabel').each(function(index) {
    var value = $(this).html();
    $.each(getImagesNeeded(options.slice(1)), function(i, suffix) {
      imagesNeeded.push(value + suffix);
    });
  });
  return imagesNeeded;
}

还有其他方法可以做到。例如，没有递归:

function getImagesNeeded(options) {
  var imagesNeeded = [""];
  $.each(options, function(i, optionName) {
    var newImagesNeeded = [];
    $.each(imagesNeeded, function(i, oldImageName) {
      $('.' + optionName + ' .optionLabel').each(function(i, label) {
        newImagesNeeded.push(oldImageName + label.innerHTML);
      });
    });
    imagesNeeded = newImagesNeeded;
  });
  return imagesNeeded;
}
相关文章：