在jQuery中通過循環追加一個列表項

Question

如何通過循環在JQuery中追加新的列表項。 每次用戶單擊該按鈕時，都會附加一個顯示正確索引的新項目。

這是我的代碼示例：

$('#append').click(function() {
    $('ul#myList > li').each(function(i) {
        var content = "<li>" + "Item" + (1+i) + "</li>";
        $(this).append(content);
    });
});

輸出應該是這樣的

Item 1
Item 2
Item 3
and so on

Answer 1

找到總長度並將該值分配給變量然后使用此代碼

  $('#append').click(function() { var contentLength = $('ul#myList > li').length; var content = "<li>" + "Item" + (contentLength+1) + "</li>"; $('ul#myList').append(content); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="append">Add More</button> <ul id="myList"> <li>Item1</li> </ul> 

下面是前置代碼

  $('#prepend').click(function() { var contentLength = $('ul#myList > li').length; var content = "<li>" + "Item" + (contentLength+1) + "</li>"; $('ul#myList').prepend(content); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="prepend">Add More</button> <ul id="myList"> <li>Item1</li> </ul> 

Answer 2

$('#append').click(function() {
    $("#myList").append(" <li>Item " + ($('#myList > li').length + 1) + "</li>");
});

Answer 3

 $('#append').click(function(e) { e.preventDefault(); $('ul#myList').append(function() { return "<li>" + "Item " + ($('ul#myList > li').length + 1) + "</li>"; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="myList"> <li>Item 1</li> </ul> <button id="append" type="button">Append</button> 

Answer 4

試試這個 ：

<ul id="addlist">
<li>item 0</li>
</ul>
<div class="clickme">
Click me to add li
</div>

$('.clickme').click(function() {
var findlist=$('ul#addlist > li').length;
$('<li> item '+findlist+'</li>').appendTo('#addlist');

});