循环遍历数组并输出 HTML答案

【问题标题】：Loop Through Array and Output HTML循环遍历数组并输出 HTML
【发布时间】：2015-02-05 16:27:12
【问题描述】：

我正在遍历一个数组并将结果附加到我页面上的一个 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 被添加了两次。我不知道为什么会这样。任何帮助表示赞赏！

【问题讨论】：

为什么在循环之前数组中有值？这可能就是您看到 file1 两次的原因，因为它在数组中，然后循环再次添加它。要么稍后开始计数，要么在开始时数组中没有任何内容。
运行 JS 之前的 html 是什么样的？
它是 += 与 append 结合，你说的是 append file1，然后 append file1+file2，然后再附加 file1+file2+file3，看起来像 file1，file1+文件 2，文件 1 + 文件 2 + 文件 3。只需删除 += 并使其变为 = 就可以了。

标签： javascript jquery html arrays

【解决方案1】：

因为您使用的是+=。这使它附加到以前的 HTML。将其替换为简单的= 即可。

现在是这样的：

(i=0)
file1

(i=1)
file1
file2

(i=3)
file1
file2
file3

最终会多次打印较早的。

【讨论】：

谢谢！不敢相信我没听懂：] 当我允许时会接受你的回答

【解决方案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);

【讨论】：