使用 jquery 显示数组中的所有项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9541570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display all items in array using jquery
提问by captainrad
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
我有一个我想在 html 中显示的数组。我不想写多行来发布数组中的每个项目，但所有项目都应该完全相同。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.
我在这里想要的是为数组中的每个项目创建一个跨度。
回答by jfriend00
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:
您可以通过在循环中遍历数组，将新的 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(""));
Some people prefer to use jQuery's .each()method instead of the forloop which would work like this:
有些人更喜欢使用 jQuery 的.each()方法而不是for像这样工作的循环：
var array = [...];
var newHTML = [];
$.each(array, function(index, value) {
newHTML.push('<span>' + value + '</span>');
});
$(".element").html(newHTML.join(""));
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 .mapcan be used like this:
或者因为数组迭代的输出本身是一个数组，其中一个项目从原始数组中的每个项目派生而来，jQuery 的.map可以这样使用：
var array = [...];
var newHTML = $.map(array, function(value) {
return('<span>' + value + '</span>');
});
$(".element").html(newHTML.join(""));
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 forloop 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.
您应该使用哪种是个人选择，具体取决于您喜欢的编码风格、对性能的敏感性以及对.map(). 我的猜测是for循环将是最快的，因为它具有较少的函数调用，但如果性能是主要标准，那么您必须对选项进行基准测试以进行实际测量。
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.
仅供参考，在所有这三个选项中，HTML 被累积到一个数组中，然后在最后连接在一起并一次性插入到 DOM 中。这是因为 DOM 操作通常是此类操作中最慢的部分，因此最好尽量减少单独的 DOM 操作的数量。结果被累积到一个数组中，因为向数组中添加项然后在最后加入它们通常比随时添加字符串更快。
And, if you can live with IE9 or above (or install an ES5 polyfill for .map()), you can use the array version of .maplike this:
而且，如果您可以使用 IE9 或更高版本（或为 安装 ES5 polyfill .map()），您可以使用如下数组版本.map：
var array = [...];
$(".element").html(array.map(function(value) {
return('<span>' + value + '</span>');
}).join(""));
Note: this version also gets rid of the newHTMLintermediate variable in the interest of compactness.
注意：newHTML为了紧凑，这个版本也去掉了中间变量。
回答by charlietfl
Use any examples that don't insert each element one at a time, one insertion is most efficient
使用任何不一次插入每个元素的示例，一次插入是最有效的
$('.element').html( '<span>' + array.join('</span><span>')+'</span>');
回答by T.CK
Original from Sept. 13, 2015:
Quick and easy.
2015 年 9 月 13 日的原文：
快速而简单。
$.each(yourArray, function(index, value){
$('.element').html( $('.element').html() + '<span>' + value +'</span>')
});
Update Sept 9, 2019: No jQuery is needed to iterate the array.
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>`;
});
回答by trapper
for (var i = 0; i < array.length; i++) {
$(".element").append('<span>' + array[i] + '</span>');
}
回答by Chris Abrams
You should use $.mapfor this:
您应该$.map为此使用：
var array = ["one", "two", "three"];
var el = $.map(array, function(val, i) {
return "<span>" + val + "</span>";
});
$(".element").html(el.join(""));
回答by Mohsin Shoukat
here is solution, i create a text field to dynamic add new items in array my html code is
这是解决方案，我创建了一个文本字段以在数组中动态添加新项目我的 html 代码是
<input type="text" id="name">
<input type="button" id="btn" value="Button">
<div id="names">
</div>now type any thing in text field and click on button this will add item onto array and call function dispaly_arry
现在在文本字段中输入任何内容并单击按钮，这会将项目添加到数组并调用函数 dispaly_arry
$(document).ready(function()
{
function display_array()
{
$("#names").text('');
$.each(names,function(index,value)
{
$('#names').append(value + '<br/>');
});
}
var names = ['Alex','Billi','Dale'];
display_array();
$('#btn').click(function()
{
var name = $('#name').val();
names.push(name);// appending value to arry
display_array();
});
});
showing array elements into div , you can use span but for this solution use same id .!
将数组元素显示为 div ，您可以使用 span 但对于此解决方案使用相同的 id .!
