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

Question

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

var array = [];
//code that fills the array..
$('.element').html('<span>'+array+'</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 或更高版本(或为 .map() 安装 ES5 polyfill)，您可以使用 .map 的数组版本，例如这个:

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

注意:为了简洁起见，此版本还删除了 newHTML 中间变量。