javascript - 通过 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的代码

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