無法在JavaScript / jQuery中將整個二維數組作為參數傳遞

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的內容覆蓋 3次，並且在上次迭代中設置的值仍然可見。 我通過將html()替換為append() ，該功能可以實現您想要的功能。