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

- Abhijit Borkakoty

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>

- Gaurav Aggarwal

---

我尝试了，但输出结果是这样的： 项目1 项目5 项目2 项目5 项目3 项目5 项目4 项目5 - Abhijit Borkakoty

为什么你想要在点击时添加li时，每次都要使用each函数呢？请在1秒内回答。 - Gaurav Aggarwal

检查代码，它正常工作，它会在按钮点击时添加li。 - Gaurav Aggarwal

嘿 @gaurav，我要怎么写一个类似的东西来实现在前面添加...输出应该是这样的：1 个项目已添加到前面 2 个项目已添加到前面 项目 1 项目 2 - Abhijit Borkakoty

дҪҝз”Ё.prepend()еҮҪж•°д»Јжӣҝ.append()еҮҪж•°гҖӮ - Gaurav Aggarwal

Answer 2

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

- Mohammad Usman

Answer 3

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

- lsv

---

它可以工作，但我只想添加一个元素一次...你的代码每次添加4个。 - Abhijit Borkakoty

它应该只添加一个元素..你能把你的代码放在这里吗？:) - lsv

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');

});

- Maharajan