jQuery .appendTo或更一般的循環不按預期工作

Question

jQuery新手在這裏。我正在通過R Murphy的jQuery基礎知識工作，並在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

你也可以repalce指針

$newItem 

進入循環

例如：

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