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

Question

我有一個HTML網頁，上面有一個無序列表，如下所示（簡化）：

<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和項目3之間添加新的列表項。

我不確定是否可以"after"此處使用"after" ，以及在這種情況下如何使用它，或者是否有更好的方法來使用它。

Answer 1

$('#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屬性（我想它們是您解決問題的一部分嗎？）。

Answer 2

好吧，這並不難。

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <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> 

Answer 3

已經有很多答案，但只想添加我的解決方案。 對我來說，弄清楚如何做到這一點很有趣。

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

Answer 4

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

例

Answer 5

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