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更好。

请改为尝试：

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

我定义名称列表，列表元素和列表元素parent
我从dom中分离列表，因此它不会刷新dom 对于每个添加的列表项。
我清空了列表，以防已有值
每个语句更多用于触发与＃names-list相关的函数，而不是处理页面上列表的多次出现
我运行循环遍历数组中的每个项目
我将数组中每个名称的列表项附加到分离的#name-list
在最后一个循环中，我将完整列表添加回dom，方法是将其附加到父元素

Answer 2

each（）方法有一个“index”参数。用它来获取列表中的正确值。

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

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

Answer 3

使用为每个功能提供的index属性。此外，由于它是文本数据，您可以使用.text(...)函数：

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

请参阅jsFiddle

Answer 4

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

JQuery将数组值附加到每个列表项

4 个答案: