logo标签列表

如何使用Jquery在列表的第一个位置添加一个列表项

jquery
19

如何使用 jQuery 将列表项添加到列表的第一个位置？

<ul id="mylist">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>  
</ul>

使用jQuery，在第一个<li>标签之前添加列表项，是否可行？我尝试使用$('#mylist li:eq(1)').before("<li></li>")，但它不起作用？

你觉得为什么它不起作用？ - zerkms
1
:eq() 使用从零开始的索引；第一个为 :eq(0)。 - nbrooks
3个回答
阿里云服务器只需要99元/年，新老用户同享，点击查看详情
51
$('#mylist').prepend('<li></li>')
27

你正在选择第二个 li 元素，试试这个：

$('#mylist li:eq(0)').before("<li>first</li>");
//or $('#mylist li:first')...

或者你可以使用prepend方法。

当列表为空且ul内没有li时，这将失败，@zackdever的答案适用于该情况。 - xploshioOn
5
这段代码可以解决问题。或者，您可以前往链接了解更多信息。 
$('#mylist').prepend('<li>New Item</li>');
//use jQuery's prepend method.


$('button').on('click',function(){
  $('#mylist').prepend('<li>New Item 1 added</li>')
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
  
  <body>
  <ul id="mylist">
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>  
  </ul>  
  <button> click to add first li</button>
  </body>
  
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，