Question

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

这是一个codepen： 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();

Answer 1

问题是你有$（“＃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();

Answer 2

您可能需要以下内容：

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的内容，并且上次迭代中设置的值仍然可见。我通过将html()替换为append()来解决这个问题，这可以达到你想要的效果。

麻烦将整个二维数组作为参数传递给JavaScript / jQuery

2 个答案: