如何通过循环在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

解决方法:

找到总长度并将该值分配给变量然后使用此代码

 $('#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>