JQuery的数组值附加到每个项目

Question

我有一个无序列表如下：

<ul id="names-list"> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
</ul> 

可以说，我想从这个列表名称添加到每个<li>项目：

var names = [ "Jon", "Nick", "Bill", "Tom" ]; 

而我的代码是这样的：

$('#names-list li').each(function() { 
$(this).append(names); 
}); 

但是由于某种原因，它不起作用。有人能告诉我我做错了什么吗？谢谢。

Answer 1

each（）方法有一个“索引”参数。用它在你的列表中获得适当的值。

var names = [ "Jon", "Nick", "Bill", "Tom" ]; 
$('#names-list li').each(function (index) { 
    $(this).text(names[index]); 
}); 

演示：http://jsfiddle.net/7ESKh/

Answer 2

var index = 0; 
$('#names-list li').each(function() { 
$(this).html(names[index]); 
index = index + 1; 
}); 

Answer 3

使用提供给每个功能的index财产。此外，由于它是文本数据，你可以使用.text(...)功能：

$('#names-list li').each(function (index) { 
    $(this).text(names[index]); 
}); 

见jsFiddle

Answer 4

为什么没有人指出，立足于空李时珍在DOM数里的数量是一个可怕的如何做到这一点？基于数组中有多少项来生成li会更好。

试试这个：

HTML

<div id="parent"> 
    <ul id="names-list"> 
     <!-- empty list --> 
    </ul> 
</div> 

JS

var names = [ "Jon", "Nick", "Bill", "Tom" ]; 
var list = $("#names-list"); 
var parent = list.parent(); 

list.detach().empty().each(function(i){ 
    for (var x = 0; x < names.length; x++){ 
     $(this).append('<li>' + names[x] + '</li>'); 
     if (x == names.length - 1){ 
      $(this).appendTo(parent); 
     } 
    } 
}); 

1. 我定义的名称列表，列表元素，而列表元素的父
2. 我将该列表从dom中分离出来，因此它不会刷新添加的每个列表项目的dom 。
3. 我清空列表的情况下，已经有值有
4. 的每个语句是更多的关于＃名称列表触发一个函数，而不是页面
5. 我运行处理列表中的多位occurances在循环中的每个项目阵列
6. 我的阵列分离的＃在追加每名列表项中去名称列表
7. 在最后的循环中，我通过附加其添加的完整列表返回到DOM到父元素