无法在 JavaScript/jQuery 中将整个二维数组作为参数传递答案

【问题标题】：Trouble passing entire two dimensional array as parameters in JavaScript/jQuery无法在 JavaScript/jQuery 中将整个二维数组作为参数传递
【发布时间】：2014-08-07 00:40:08
【问题描述】：

我正在尝试使用以下方法围绕二维数组的每个元素生成 div。到目前为止，代码仅输出数组中的最后 3 个元素（第三个嵌套数组的 3 个元素）。我使用 .apply 将数组元素作为参数传递。我如何修改它以按顺序输出数组 catArray 的每个元素？为什么它只会按原样通过最后 3 个？任何建议将不胜感激，我正在努力更好地理解这一点。我已经为此花费了几个小时，希望有人可以提供帮助。

这是一个代码笔： http://codepen.io/anon/pen/kzEdK

function cats(catName, catFur, catEyes) {
  $("#row").html('<div>' + catName + '</div>' + '<div>' + catFur + '</div>' + '<div>' + catEyes + '</div>');
}

var catArray = [
  ["fluffy", "soft", "green"],
  ["mittens", "coarse", "fire"],    
  ["wiskers", "none", "grey"]
];

function catGenerator() {
  for (var i = 0; i < catArray.length; i++) {
  var blah = catArray[i];    
  cats.apply(this, blah);
  }
}

catGenerator();

【问题讨论】：

标签： javascript jquery arrays apply

【解决方案1】：

你可能想要这样的东西：

function cats(catName, catFur, catEyes) {
  // note the difference (append() instead of html())
  $("#row").append('<div>' + catName + '</div>' + '<div>' + catFur + '</div>' + '<div>' + catEyes + '</div>');
}

function catGenerator() {
  $("#row").html(""); // in case you wish to call catGenerator() multiple times, clear the row before appending to it
  for (var i = 0; i < catArray.length; i++) {
    var blah = catArray[i];    
    cats.apply(this, blah);
  }
}

它只显示最后 3 个元素，因为 $("#row").html("...") 覆盖 #row 的内容三次，并且在最后一次迭代中设置的值仍然可见。我通过用append() 替换html() 来解决这个问题，这可以满足您的需求。

【讨论】：

【解决方案2】：

问题是你有 $("#row").html() 它将在每次迭代后替换 div 标记中的标记。考虑使用 $("#row").append()

function cats(catName, catFur, catEyes) {
  $("#row").append('<div>' + catName + '</div>' + '<div>' + catFur + '</div>' + '<div>' +     catEyes + '</div>');
}

var catArray = [
  ["fluffy", "soft", "green"],
  ["mittens", "coarse", "fire"],    
  ["wiskers", "none", "grey"]
];

function catGenerator() {
  for (var i = 0; i < catArray.length; i++) {
  var blah = catArray[i];    
  cats.apply(this, blah);
  }
}

catGenerator();

【讨论】：