使用jQuery显示数组中的所有项

我有一个我想用HTML显示的数组。。 我不想为发布数组中的每个项目写多行，但所有内容都应该完全相同。即

var array = [];
//code that fills the array..
$('.element').html('<span>'+array+'</span>');

var数组=[]；
//填充数组的代码。。
$（'.element'）.html（''+array+''）；

---

我想在这里为数组中的每个项目创建一个跨度。

您可以这样做，通过循环遍历数组，将新的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的

.map

可以这样使用：

var array = [...];
var newHTML = [];
$.each(array, function(index, value) {
    newHTML.push('<span>' + value + '</span>');
});
$(".element").html(newHTML.join(""));

var array = [...];
var newHTML = $.map(array, function(value) {
    return('<span>' + value + '</span>');
});
$(".element").html(newHTML.join(""));

var array = [...];
$(".element").html(array.map(function(value) {
    return('<span>' + value + '</span>');
}).join(""));

注意：为了简洁起见，此版本还去掉了

newHTML

中间变量。

for（var i=0；ifor (var i = 0; i < array.length; i++) {
    $(".element").append('<span>' + array[i] + '</span>');
}

$（“.element”）.append（“”+array[i]+“”）； }

---

使用任何不一次插入一个元素的示例，一次插入是最有效的

 $('.element').html( '<span>' + array.join('</span><span>')+'</span>');

$（'.element'）.html（''+array.join（''）+''）；

对此，您应该使用

$.map

：

var array = ["one", "two", "three"];

var el = $.map(array, function(val, i) {
  return "<span>" + val + "</span>";
});

$(".element").html(el.join(""));

var数组=[“一”、“二”、“三”]；
var el=$.map（数组，函数（val，i）{
返回“+val+”；
});
$（“.element”）.html（el.join（“”）；

---

原件自2015年9月13日起：
又快又容易

$。每个（数组、函数（索引、值）{
$（'.element'）.html（$（'.element'）.html（）+''+值+''）
});

更新日期：2019年9月9日： 迭代数组不需要jQuery

yourArray.forEach（（值）=>{
$（“.element”）.html（`${$（.element”）.html（）}${value}`）；
});
/*---或者根本不使用jQuery--*/
yourArray.forEach（（值）=>{
document.querySelector（“.element”）.innerHTML+=`${value}`；
});

这是一个解决方案，我创建一个文本字段来动态添加数组中的新项 我的html代码是

添加了ES5

array.map（）

version。出于许多原因，此代码需要重构。可以在循环之前将

var$element=$（'.element'）

存储到变量中。这将避免在每个循环周期中创建新的jQuery对象。此外，在每个循环周期上调用append的性能也不是很好。创建字符串并通过一次调用更新DOM的解决方案的性能要高得多，当然也可以不使用jQuery。只有OP会知道这是必要的还是过早的优化。这段代码对我来说运行良好，你能显示任何错误吗？解决方案越是如此，代码就越能优化。