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

为什么没有人指出将李的数量基于dom中空li的数量是一种可怕的方式呢？根据阵列中有多少项来生成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. 每个语句更多用于触发与#names-list相关的函数,而不是处理页面上列表的多次出现
5. 我运行循环遍历数组中的每个项目
6. 我将一个列表项与数组中的每个名称附加到分离的#name-list
7. 在最后一个循环中,我将完整列表添加回dom,方法是将其附加到父元素

Answer 2

each()方法有一个"索引"参数.使用它来获取列表中的正确值.

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

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