Loop Through Array и Output HTML

Я перебираю массив и добавляю результат к элементу HTML на моей странице.Loop Through Array и Output 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 является добавляется дважды. Я не знаю, почему это происходит. Любая помощь приветствуется!

источник

2015-02-05 three3

Почему существуют значения в массиве до того, как вы закончите цикл? Вероятно, поэтому вы видите файл1 дважды, потому что он находится в массиве, затем цикл добавляет его снова. Либо начните отсчет позже, либо ничего не получите в массиве при запуске. – Slime

Как выглядит html, прежде чем запускать JS? – Steve

это + = в сочетании с добавлением, вы говорите append file1, затем добавляете файл1 + file2, затем позже будет добавлен файл1 + file2 + file3, который будет выглядеть как file1, file1 + file2, file1 + file2 + file3 , Просто удалите + = и сделайте это = и вы должны быть добры. –

Потому что вы используете +=. Это делает его добавлением к предыдущему HTML. Замените его простым =, и он будет работать.

Прямо сейчас это происходит так:

(i=0) 
file1 

(i=1) 
file1 
file2 

(i=3) 
file1 
file2 
file3

И он заканчивает печать с более ранними несколько раз.

источник

2015-02-05 16:30:19 Scimonster

Спасибо! Не могу поверить, что я этого не поймал:] Принят ваш ответ, когда SO позволит мне – three3

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);

источник

2015-02-05 16:31:47

Loop Through Array и Output HTML

ответ

Смежные вопросы