數組循環總是返回最后一個值

Question

我有以下循環：

var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];

var html = "";  

for (let i = 0; i < array.length; i++) {
  var html = "<div class='group' data-department='"+array[i]+"'>";
  html += "<div class='title'>" + textArray[i] + "</div>";
  html += "</div>";
}  

這個JS的輸出是：

<div class="group" data-department="Value 3">
   <div class="title">Text 3</div>
</div>

<div class="group" data-department="Value 3">
   <div class="title">Text 3</div>
</div>

<div class="group" data-department="Value 3">
   <div class="title">Text 3</div>
</div>

我所追求的是：

<div class="group" data-department="Value 1">
   <div class="title">Text 1</div>
</div>

<div class="group" data-department="Value 2">
   <div class="title">Text 2</div>
</div>

<div class="group" data-department="Value 3">
   <div class="title">Text 3</div>
</div>

一個console.log("Value: " + array[i]); 返回：

Value: Value 1
Value: Value 2
Value: Value 3

還有一個console.log("Text: " + textArray[i]); 返回：

Text: Text 1
Text: Text 2
Text: Text 3

那么不確定為什么我的標記是基於數組中的最后一項呈現的？

在從循環中刪除 var 之后，我得到以下結果（容器 div 相互嵌套）：

 var html = ""; for (let i = 0; i < array.length; i++) { html += "<div class='group' data-department='"+array[i]+"'>"; html += "<div class='title'>" + textArray[i] + "</div>"; html += "</div>"; }

 <div class="group" data-department="Value 1"> <div class="title">Text 1</div> <div class="group" data-department="Value 2"> <div class="title">Text 2</div> <div class="group" data-department="Value 3"> <div class="title">Text 3</div> </div> </div> </div>

Answer 1

var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];

var html = "";  

for (let i = 0; i < array.length; i++) {
   html += "<div class='group' data-department='"+array[i]+"'>";
  html += "<div class='title'>" + textArray[i] + "</div>";
  html += "</div>";


}  

console.log(html)

您在循環中重新分配了變量 html。這導致每次循環開始時 html 變量都會重置。 最后，您將只擁有最后一個值。

你說這些值是嵌套的，但對我來說不是這樣：

 var html = ""; var array = ["Value 1", "Value 2", "Value 3"]; var textArray = ["Text 1", "Text 2", "Text 3"]; for (let i = 0; i < array.length; i++) { html += "<div class='group' data-department='"+array[i]+"'>"; html += "<div class='title'>" + textArray[i] + "</div>"; html += "</div>"; } console.log(html)

回報：

<div class='group' data-department='Value 1'>
    <div class='title'>Text 1</div>
</div>

<div class='group' data-department='Value 2'>
    <div class='title'>Text 2</div>
</div>

<div class='group' data-department='Value 3'>
    <div class='title'>Text 3</div><
/div>

Answer 2

 var array = ["Value 1", "Value 2", "Value 3"]; var textArray = ["Text 1", "Text 2", "Text 3"]; var html = ""; for (let i = 0; i < array.length; i++) { html += "<div class='group' data-department='"+array[i]+"'>"; html += "<div class='title'>" + textArray[i] + "</div>"; html += "</div>"; } console.log(html)

Answer 3

盡量避免使用innerHTML ，使用document.createElement廣告而不是設置您需要的屬性。 使用appendChild將一個元素放入另一個元素中

 var array = ["Value 1", "Value 2", "Value 3"]; var textArray = ["Text 1", "Text 2", "Text 3"]; for (let i = 0; i < array.length; i++) { const div1 = document.createElement('div') div1.dataset.department = array[i] div1.classList.add(`group`) const div2 = document.createElement('div') div2.classList.add(`title`) div2.innerText = textArray[i] div1.appendChild(div2) document.querySelector(`.parent`).appendChild(div1) }

 <div class="parent"> </div>

Answer 4

您不需要循環中的var html。

var array = ["Value 1", "Value 2", "Value 3"],
    textArray = ["Text 1", "Text 2", "Text 3"],
    html = "";  

for (let i = 0; i < array.length; i++) {
  html += "<div class='group' data-department='"+array[i]+"'>";
  html += "<div class='title'>" + textArray[i] + "</div>";
  html += "</div>";
}
console.log(html);