的jQuery如何填写李肇星对李的顶部内侧UL

Question

假设我有UL与一个李如下图所示

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

我要的是使用jQuery例子如下

插入更多李肇星对给定的L1上方

<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

想要点击“添加生物”链接并添加到<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; 
});​ 

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

$('.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 5

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

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