使用 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中间变量。

Answer 2

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

Answer 3

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

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

Answer 4

您应该为此使用$.map：

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

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

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

jsFiddle demo

Answer 5

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>`;
});

Answer 6

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

 <input type="text" id="name">
	 <input type="button" id="btn" value="Button">
		<div id="names">
		</div>

现在在文本字段中输入任何内容并单击按钮，这会将项目添加到数组中并调用函数 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();
		
	});
	
});
	

在 div 中显示数组元素，您可以使用 span 但对于此解决方案使用相同的 id .!