Question

我循环遍历数组并将结果附加到我页面上的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，但是，有一个小错误。我的数组中的第一项附加了两次。

这是我的数组在循环之前的样子：

["file1.png", "file2.pdf"]

循环完成后，生成的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>

如您所见，file1.png正在添加两次。我不知道为什么会这样。任何帮助表示赞赏！

Answer 1

因为您正在使用+=。这使它附加到以前的HTML。用简单的=替换它，它会起作用。

现在它是这样的：

(i=0)
file1

(i=1)
file1
file2

(i=3)
file1
file2
file3

它最终会多次打印早期的那些。

Answer 2

尝试按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);

循环数组和输出HTML

2 个答案: