使用jquery显示数组中的所有项目

Question

我有一个我希望在html中显示的数组..我不想写多行来发布数组中的每个项目,但所有项目应该完全相同.即

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

我想要的是为数组中的每个项创建一个span.

Answer 1

您可以这样做,方法是在循环中迭代数组,将新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循环将是最快的,因为它具有较少的函数调用,但如果性能是主要标准,那么您将必须对选项进行基准测试以实际测量.

仅供参考,在所有这三个选项中,HTML被累积到一个数组中,然后在最后连接在一起并一次插入到DOM中.这是因为DOM操作通常是这样的操作中最慢的部分,因此最好最小化单独的DOM操作的数量.结果被累积到一个数组中,因为将项添加到数组然后在最后加入它们通常比添加字符串更快.

并且,如果您可以使用IE9或更高版本(或安装ES5 polyfill .map()),您可以使用如下的阵列版本.map:

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

注意:newHTML为了紧凑性,这个版本也摆脱了中间变量.

Answer 2

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

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

Answer 3

2015年9月13日的原件：
快速简便。

$.each(yourArray, function(index, value){
    $('.element').html( $('.element').html() + '<span>' + value +'</span>')
});

2019年9月9日更新：无需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>`;
});