如何將新的列表項添加到無序列表

-1

<ul id="myList"> 
    <li id="item1">Item 1 <a href="javascript:void(0)" class="myButton">Add</a></li> 
    <li id="item2">Item 2 <a href="javascript:void(0)" class="myButton">Add</a></li> 
    <li id="item3">Item 3 <a href="javascript:void(0)" class="myButton">Add</a></li> 
    <li id="item4">Item 4 <a href="javascript:void(0)" class="myButton">Add</a></li> 
    <li id="item5">Item 5 <a href="javascript:void(0)" class="myButton">Add</a></li> 
</ul>

有沒有使用jQuery的方式可以在下面的添加新的列表項當前的一個，通過點擊相應的按鈕？ 例子：如果我點擊了第2項的按鈕，我想第2項和項目之間

添加新的列表項，我不知道我是否可以使用 "after"這裏，如果，如何應用它在這種情況下，還是有更好的方法來做到這一點。

來源

2014-09-21 user2571510

我嘗試追加ul ID，但總是在列表的末尾添加新項目。 – user2571510 2014-09-21 12:17:13

$('#myList').on('click', '.myButton', function() { 
    $(this).closest('li').after(createItem()); 
}); 

function createItem() { 
    //return your HTML, a jQuery object or a DOM element representing 
    //the new item to add 
}

請注意，我並沒有與id數量麻煩了，因爲我想你可能不需要id屬性（我猜他們是你解決問題的一部分？）。

來源

2014-09-21 12:23:17 plalx

完美 - 這就是我一直在尋找的。非常感謝 - 我會盡快接受。 – user2571510 2014-09-21 12:23:49

@ user2571510請注意，您可能會擺脫所有這些「id」屬性。很高興我可以幫忙;） – plalx 2014-09-21 12:24:47

謝謝 - 是的，肯定會這樣做，因爲這個解決方案，他們不需要。 – user2571510 2014-09-21 12:25:58

-2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<ul id="myList"> 
 
    <li id="item1">Item 1 <a onclick='$(this).append("<li>a</li>");' class="myButton">Add</a></li> 
 
    <li id="item2">Item 2 <a onclick='$(this).append("<li>a</li>");' class="myButton">Add</a></li> 
 
    <li id="item3">Item 3<a onclick='$(this).append("<li>a</li>");' class="myButton">Add</a></li> 
 
    <li id="item4">Item 4 <a onclick='$(this).append("<li>a</li>");' class="myButton">Add</a></li> 
 
    <li id="item5">Item 5 <a onclick='$(this).append("<li>a</li>");' class="myButton">Add</a></li> 
 
</ul>

來源

2014-09-21 12:23:46

var addedLis=0 
$(function(){ 
    $("#myList").on("click",".myButton",function(){ 
     addedLis++; 
     var _newLI='<li id="addedItem'+addedLis+'">Added Item '+addedLis+' <a href="javascript:void(0)" class="myButton">Add</a></li>' 
     $(this).parent().after(_newLI); 
    });  
});

Example

來源

2014-09-21 12:24:11 Banana

非常感謝！ – user2571510 2014-09-21 12:25:20

在新項目上，添加鏈接不起作用。 – GramThanos 2014-09-21 12:28:45

@ThanasisGrammatopoulos我修好了，謝謝 – Banana 2014-09-21 12:31:37

嗯，這並不難。

function addAnItem(button){ 
 
\t var newItem = $('<li>New Item <a href="javascript:void(0)" class="myButton">Add</a></li>'); 
 
\t newItem.find('.myButton').click(function(){ 
 
\t \t addAnItem(this); 
 
\t }); 
 
\t $(button).parent().after(newItem); 
 
} 
 

 
var list = $('ul').find('.myButton').click(function(){ 
 
\t addAnItem(this); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
\t <li id="item1">Item 1 <a href="javascript:void(0)" class="myButton">Add</a></li> 
 
\t <li id="item2">Item 2 <a href="javascript:void(0)" class="myButton">Add</a></li> 
 
\t <li id="item3">Item 3 <a href="javascript:void(0)" class="myButton">Add</a></li> 
 
\t <li id="item4">Item 4 <a href="javascript:void(0)" class="myButton">Add</a></li> 
 
\t <li id="item5">Item 5 <a href="javascript:void(0)" class="myButton">Add</a></li> 
 
</ul>

來源

2014-09-21 12:25:24 GramThanos

非常感謝 - 這也非常有幫助！ – user2571510 2014-09-21 12:40:46

已經很多答案，但只是想補充我的解決方案。對我來說，搞清楚如何做到這一點是一件有趣的事情。

$('.myButton').click(function() { 
    $('<li>New Item</li>').insertAfter($(this).closest('li')); 
});

來源

2014-09-21 12:32:19 wvdz

非常感謝！ – user2571510 2014-09-21 12:41:14

如何將新的列表項添加到無序列表

回答

相關問題