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

 <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

以下解决方案将正确递增数字并按升序保存：

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>？这就是我要做的事，如果我不理解这个问题，那就很抱歉。

Here's a demo

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

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

jquery如何在li里面填充li的顶部

5 个答案: