Question

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

我能够这样做：

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);

Answer 1

听起来你有很多选项列表，并且你想要生成所有选项排列的列表。

这可以递归完成，如this fiddle：

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;
}

还有其他方法可以做到这一点。例如，without recursion：

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;
}

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

1 个答案: