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或更高版本（或为.map()安装ES5 polyfill），您可以使用.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

快捷方便。

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

Answer 4

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

Answer 5

您应该使用$.map：

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

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

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

jsFiddle demo

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。！

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

6 个答案: