jQuery .appendTo或更一般的循环不能按预期工作

Question

jQuery新手在这里。我正在研究R Murphy的jQuery Fundamentals，并参与了jQuery Basics部分的操作练习。

该部分的第一个问题要求您在无序列表#myList的末尾添加五个新列表项。

我的方法是做以下事情：

var $newItem = $('<li>New Item</li>');
var $ul = $('#myList');

for (var i=0;i<5;i++){
    $newItem.appendTo($ul);
};

但是这不起作用，因为它只将一个列表项插入列表，而不是5。

作者提供的解决方案与我的非常接近，唯一的区别是她没有将新列表项存储在变量中，而是使用文字：

var $ul = $('#myList');
for (i=0; i<5; i++) {
    $('<li>List item ' + i + '</li>').appendTo($ul);
}

似乎我的方法也应该起作用，所以我很难理解为什么它没有。

帮助？

提前致谢， Ñ

Answer 1

您的方法在循环外部创建单个li元素，并尝试将相同的内容追加到ul五次。但是，由于您持有对单个li的引用，因此每次附加它时，它实际上会将其从原位移除并在那里重新添加它。

在解决方案中，li在循环内创建，因此每次迭代都是一个新的li元素。

您可以更改自己的方法以使用.clone() ^docs方法

for (var i=0;i<5;i++){
    $newItem.clone().appendTo($ul);
};

这样它就会创建一个副本，然后将其添加到ul。

Answer 2

你也可以重新指定指针

$newItem

进入循环

示例：

var $ul = $('#myList');
for (var i=0;i<5;i++)
{
var $newItem = $('<li>New Item</li>');
$newItem.appendTo($ul);
};