使用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);
});

但出于某些原因它不起作用。可以有人告诉我我做错了什么吗？谢谢。

- Maverick

Answer 1

为什么没有人指出，基于 DOM 中空 li 的数量来确定 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. 我定义了names列表，列表元素和列表元素的父级
2. 我将列表从dom中分离，这样每次添加列表项时就不会刷新dom。
3. 如果已经有值，我将清空列表
4. each语句更多是为了触发与#names-list相关的函数，而不是处理页面上多个列表的多个出现
5. 我运行一个循环遍历数组中的每个项目
6. 我将数组中每个名称附加到分离的#names-list中的列表项
7. 在最后一个循环中，通过将其附加到父元素来将完整列表添加回dom

更新：纯JS、现代语法版本

如果您能使用现代代码，则这是我今天要使用的纯JS es6版本:

const names = [ "Jon", "Nick", "Bill", "Tom" ];
const listElem = document.querySelector("#names-list");

// Creates a string of HTML to inject rather than appending DOM elements
const listItemsHtml = names.map(name => `<li>${name}</li>`).join('');

// Replaces the current content in the list with the new content
listElem.innerHTML = listItemsHtml

- Daniel Tonon

Answer 2

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

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

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

- Julien Lafont

Answer 3

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

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

请查看jsFiddle

- jb10210

Answer 4

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

- Hardik Patel