jQuery如何在ul內的li上方填充li

Question

假設我有一個li的ul，如下所示

    <ul class="creatures_list" style="display:block">
      <li class='list_creatures'><a href="#"><b>Add Creatures</b></a></li>
   </ul>

我想要的是使用jQuery示例在給定的li上插入更多li，如下所示

 <ul class="creatures_list" style="display:block">
     <li class='list_creatures'><a href='#'>1</a></li>
     <li class='list_creatures'><a href='#'>2</a></li>
     <li class='list_creatures'><a href='#'>3</a></li>
     <li class='list_creatures'><a href='#'>4</a></li>
     <li class='list_creatures'><a href="#"><b>Add Creatures</b></a></li>
 </ul>

我希望這是可以理解的。 睡着了

Answer 1

$('.creatures_list').prepend(function() {

   var html;

   for (var i = 1; i < 5; i++) {
       html += "<li class='list_creatures'><a href='#'>" + i + "</a></li>";
   }

   return html;

});

Answer 2

var $last_child =  $('.creatures_list').children('.list_creatures').last();

for(var i = 0; i < 4; i++) {
  $last_child.before("<li class='list_creatures'><a href='#'>" + (i + 1) + "</a></li>");
}

Answer 3

下面的解決方案將正確地增加數字並保持其升序：

var numCreatures = 0;

function addCreature() {
   $(".creatures_list li:last").before(
      "<li class='list_creatures'><a href='#'>" + ++numCreatures + "</a></li>"
   );
}

您可以隨時調用addCreature，例如，當某人單擊最后一個<li> ：

$(".creatures_list li:last").click(addCreature);

Answer 4

使用http://api.jquery.com/prepend/

$('#creatures_list').prepend('<li class="list_creatures"><a href="#">1</a></li>';

Answer 5

是否要單擊“添加生物”鏈接並添加到<ul> ？ 這就是這樣做的方法，對不起，如果我不理解這個問題。

這是一個演示

var liCount = $('.creatures_list').children().size();

$('.add_creature').click(function(){
  $(this).before('<li><a href="##" class="list_creatures">'+liCount+++'</a></li>');
  return false;
});​