У меня есть массив, который я хочу отобразить в html. Я не хочу писать несколько строк для размещения каждого элемента в массиве, но все должно быть точно таким же. т.е.
var array = [];
//code that fills the array..
$('.element').html('<span>'+array+'</span>');
я хочу здесь создать диапазон для каждого элемента массива.
Вы можете сделать это, как это, итерируя через массив в цикле, накапливая новый HTML в свой собственный массив, а затем объединяя HTML вместе и вставляя его в DOM в конце:
var array = [...];
var newHTML = [];
for (var i = 0; i < array.length; i++) {
newHTML.push('<span>' + array[i] + '</span>');
}
$(".element").html(newHTML.join(""));
Некоторые люди предпочитают использовать метод jQuery .each() вместо цикла for который будет работать следующим образом:
var array = [...];
var newHTML = [];
$.each(array, function(index, value) {
newHTML.push('<span>' + value + '</span>');
});
$(".element").html(newHTML.join(""));
Или потому, что результат итерации массива представляет собой массив с одним элементом, производным от каждого элемента в исходном массиве, jQuery .map можно использовать следующим образом:
var array = [...];
var newHTML = $.map(array, function(value) {
return('<span>' + value + '</span>');
});
$(".element").html(newHTML.join(""));
Что вы должны использовать, это личный выбор в зависимости от вашего предпочтительного стиля кодирования, чувствительности к производительности и знакомства с .map(). Я предполагаю, что цикл for будет самым быстрым, так как он имеет меньше вызовов функций, но если производительность является основным критерием, тогда вам нужно будет сравнить параметры, которые нужно измерить.
FYI, во всех трех этих параметрах HTML накапливается в массив, а затем объединяется в конце и вставляется в DOM все сразу. Это связано с тем, что операции DOM обычно являются самой медленной частью такой операции, поэтому лучше всего минимизировать количество отдельных операций DOM. Результаты накапливаются в массив, потому что добавление элементов в массив и последующее объединение их в конце обычно быстрее, чем добавление строк по ходу.
И, если вы можете жить с IE9 или выше (или установить полисполнение ES5 для .map()), вы можете использовать версию массива .map следующим образом:
var array = [...];
$(".element").html(array.map(function(value) {
return('<span>' + value + '</span>');
}).join(""));
Примечание: эта версия также избавляется от промежуточной переменной newHTML в интересах компактности.
Используйте любые примеры, которые не вставляют каждый элемент по одному, одна вставка наиболее эффективна
$('.element').html( '<span>' + array.join('</span><span>')+'</span>');
Оригинал от 13 сентября 2015 г.:
Быстро и просто.
$.each(yourArray, function(index, value){
$('.element').html( $('.element').html() + '<span>' + value +'</span>')
});
Обновление 9 сентября 2019 года: Для итерации массива jQuery не требуется.
yourArray.forEach((value) => {
$(".element").html('${$(".element").html()}<span>${value}</span>');
});
/* --- Or without jQuery at all --- */
yourArray.forEach((value) => {
document.querySelector(".element").innerHTML += '<span>${value}</span>';
});
for (var i = 0; i < array.length; i++) {
$(".element").append('<span>' + array[i] + '</span>');
}
Вы должны использовать $.map для этого:
var array = ["one", "two", "three"];
var el = $.map(array, function(val, i) {
return "<span>" + val + "</span>";
});
$(".element").html(el.join(""));
вот решение, я создаю текстовое поле для динамического добавления новых элементов в массив my html code is
<input type="text" id="name">
<input type="button" id="btn" value="Button">
<div id="names">
</div>