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

JQuery append array value to each list item

提问by Maverick

I have an unordered list like this:

我有一个这样的无序列表：

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

Lets say I want to add a name from this list to each of the <li>items:

假设我想将此列表中的名称添加到每个<li>项目中：

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

And my code is like this:

我的代码是这样的：

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

But from some reason it doesn't work. Can someone tell me what am I doing wrong? Thanks.

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

回答by Daniel Tonon

Why has no one pointed out that basing the number of li's on the number of empty li's in the dom is a horrible way to do it? It's much better to generate the li's based on how many items there are in the array.

为什么没有人指出将 li 的数量基于 dom 中的空 li 的数量是一种可怕的做法？根据数组中有多少项生成 li 会好得多。

Try this instead:

试试这个：

HTML

HTML

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

JS

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. I define the names list, the list element, and the list elements parent
2. I detach the list from the dom so it doesn't refresh the dom for every list item added.
3. I empty the list in case there are already values in there
4. The each statement is more for triggering a function in relation to #names-list rather than handling multiple occurances of the list on the page
5. I run a loop going through each item in the array
6. I append a list item with each name in the array to the detached #names-list
7. On the final loop, I add the full list back into the dom by appending it to the parent element

1. 我定义了名称列表、列表元素和列表元素的父级
2. 我将列表与 dom 分离，因此它不会为添加的每个列表项刷新 dom。
3. 我清空列表以防那里已经有值
4. each 语句更多地用于触发与#names-list 相关的函数，而不是处理页面上列表的多次出现
5. 我运行一个循环遍历数组中的每个项目
6. 我将具有数组中每个名称的列表项附加到分离的 #names-list
7. 在最后一个循环中，我通过将完整列表附加到父元素将其添加回 dom

回答by Julien Lafont

The each() method has an "index" argument. Use it to get the proper value in your list.

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

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

? Demo: http://jsfiddle.net/7ESKh/

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

回答by jb10210

Use the indexproperty provided to the each function. Also, since it's text data you could use the .text(...)function:

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

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

See jsFiddle

见jsFiddle

回答by Hardik Patel

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