JQuery, как заполнить ли в верхней части ли внутри ул

Question

Предположим, у меня есть ul с одним li, как показано ниже

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

То, что я хочу, это вставить больше li поверх данного li, используя пример jQuery, как показано ниже

 <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>

Я надеюсьэто понятно.Awating

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

Вы хотите нажать на ссылку «Добавить существо» и добавить в <ul>?Вот что это будет делать, извините, если я не понимаю вопроса.

Вот демоверсия

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

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

Answer 4

Использование http://api.jquery.com/prepend/

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

Answer 5

Приведенное ниже решение будет правильно увеличивать число и сохранять их в порядке возрастания:

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