使用jQuery显示数组中的所有项目 [英] Display all items in array using jQuery

问题描述

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

I have an array that I want to have displayed in HTML.. I don't want to write multiple lines for posting each item in the array but all should be exactly the same. ie

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

这里我想要的是为数组中的每个项目创建一个跨度.

what I want here is to create a span for each item in the array.

推荐答案

你可以这样做最后进入DOM:

You can do it like this by iterating through the array in a loop, accumulating the new HTML into it's own array and then joining the HTML all together and inserting it into the DOM at the end:

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 循环:

Some people prefer to use jQuery's .each() method instead of the for loop which would work like this:

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

或者因为数组迭代的输出本身就是一个数组，从原始数组中的每个项目派生一个项目，jQuery的.map可以这样使用:

Or because the output of the array iteration is itself an array with one item derived from each item in the original array, jQuery's .map can be used like this:

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

您应该使用哪个是个人选择，具体取决于您喜欢的编码风格、对性能的敏感性以及对 .map() 的熟悉程度.我的猜测是 for 循环将是最快的，因为它的函数调用较少，但如果性能是主要标准，那么您必须对选项进行基准测试以进行实际测量.

Which you should use is a personal choice depending upon your preferred coding style, sensitivity to performance and familiarity with .map(). My guess is that the for loop would be the fastest since it has fewer function calls, but if performance was the main criteria, then you would have to benchmark the options to actually measure.

仅供参考，在所有这三个选项中，HTML 都被累积到一个数组中，然后在最后连接在一起并一次性插入到 DOM 中.这是因为 DOM 操作通常是此类操作中最慢的部分，因此最好尽量减少单独的 DOM 操作的数量.结果会累积到一个数组中，因为向数组中添加项然后在最后加入它们通常比边添加边添加字符串要快.

FYI, in all three of these options, the HTML is accumulated into an array, then joined together at the end and the inserted into the DOM all at once. This is because DOM operations are usually the slowest part of an operation like this so it's best to minimize the number of separate DOM operations. The results are accumulated into an array because adding items to an array and then joining them at the end is usually faster than adding strings as you go.

而且，如果您可以使用 IE9 或更高版本(或为 .map() 安装 ES5 polyfill)，您可以使用 .map 的数组版本，例如这个:

And, if you can live with IE9 or above (or install an ES5 polyfill for .map()), you can use the array version of .map like this:

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

注意:为了简洁，这个版本还去掉了 newHTML 中间变量.

Note: this version also gets rid of the newHTML intermediate variable in the interest of compactness.

这篇关于使用jQuery显示数组中的所有项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！