Javascript 循环遍历数组并输出HTML

我在一个数组中循环，并将结果附加到页面上的HTML元素

以下是我的javascript/jQuery：

var numberOfFiles = email.file_id.length;
for (var fileIndex = 0; fileIndex < numberOfFiles; fileIndex++) {
  fileHTML += '<a href="downloadAttachment.php?file_id=' + email.file_id[fileIndex] + '" target="_blank">' + email.file_name[fileIndex] + '</a><br>';
  emailOpened.find('.file-attachment-wrapper').append(fileHTML);
}

循环完成后，生成的HTML如下所示：

<a href="downloadAttachment.php?file_id=54d38004fdf902cb758b456a" target="_blank">file1.png</a><br>
<a href="downloadAttachment.php?file_id=54d38004fdf902cb758b456a" target="_blank">file1.png</a><br><a href="downloadAttachment.php?file_id=54d38004fdf902cb758b456b" target="_blank">file2.pdf</a><br>

(i=0)
file1

(i=1)
file1
file2

(i=3)
file1
file2
file3

---

如您所见，

file1.png

被添加了两次。我不知道为什么会这样。感谢您的帮助

因为您正在使用

+=

。这使得它附加到前面的HTML中。用一个简单的

=

替换它，它就会工作

现在情况是这样的：

<a href="downloadAttachment.php?file_id=54d38004fdf902cb758b456a" target="_blank">file1.png</a><br>
<a href="downloadAttachment.php?file_id=54d38004fdf902cb758b456a" target="_blank">file1.png</a><br><a href="downloadAttachment.php?file_id=54d38004fdf902cb758b456b" target="_blank">file2.pdf</a><br>

(i=0)
file1

(i=1)
file1
file2

(i=3)
file1
file2
file3

---

它会多次打印前面的文件。

因为您使用的是

+=

。这使得它附加到前面的HTML中。用一个简单的

=

替换它，它就会工作

现在情况是这样的：

<a href="downloadAttachment.php?file_id=54d38004fdf902cb758b456a" target="_blank">file1.png</a><br>
<a href="downloadAttachment.php?file_id=54d38004fdf902cb758b456a" target="_blank">file1.png</a><br><a href="downloadAttachment.php?file_id=54d38004fdf902cb758b456b" target="_blank">file2.pdf</a><br>

(i=0)
file1

(i=1)
file1
file2

(i=3)
file1
file2
file3

---

它会多次打印前面的文件。

尝试通过

fileHTML=

更改

fileHTML+=

编辑：

您应该将追加代码放在循环之外，这样更有效

var numberOfFiles = email.file_id.length;
var fileHTML = "";
for (var fileIndex = 0; fileIndex < numberOfFiles; fileIndex++) {
  fileHTML += '<a href="downloadAttachment.php?file_id=' + email.file_id[fileIndex] + '" target="_blank">' + email.file_name[fileIndex] + '</a><br>';
}
emailOpened.find('.file-attachment-wrapper').append(fileHTML);

var numberOfFiles=email.file\u id.length；
var fileHTML=“”；
对于（var fileIndex=0；fileIndex

尝试通过

fileHTML=

更改

fileHTML+=

编辑：

您应该将追加代码放在循环之外，这样更有效

var numberOfFiles = email.file_id.length;
var fileHTML = "";
for (var fileIndex = 0; fileIndex < numberOfFiles; fileIndex++) {
  fileHTML += '<a href="downloadAttachment.php?file_id=' + email.file_id[fileIndex] + '" target="_blank">' + email.file_name[fileIndex] + '</a><br>';
}
emailOpened.find('.file-attachment-wrapper').append(fileHTML);

var numberOfFiles=email.file\u id.length；
var fileHTML=“”；
对于（var fileIndex=0；fileIndex

为什么在循环之前数组中有值？这可能就是为什么您会看到file1两次，因为它在数组中，然后循环会再次添加它。或者稍后开始计数，或者在开始时数组中没有任何内容。在运行JS之前html是什么样子的？它是+=与append组合的，你说的是append file1，然后append file1+file2，然后它将被append file1+file2+file3，看起来像file1，file1+file2，file1+file2+file3。只要删除+=并使其=就可以了。为什么在循环之前数组中有值？这可能就是为什么您会看到file1两次，因为它在数组中，然后循环会再次添加它。或者稍后开始计数，或者在开始时数组中没有任何内容。在运行JS之前html是什么样子的？它是+=与append组合的，你说的是append file1，然后append file1+file2，然后它将被append file1+file2+file3，看起来像file1，file1+file2，file1+file2+file3。只需移除+=并使其=就可以了。谢谢！真不敢相信我没听懂：]会接受你的答案的，所以让我嘲笑你！真不敢相信我没听懂：]所以让我接受你的回答的时候