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"以及是否，如何在这种情况下应用它，或者是否有更好的方法来执行此操作。

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

这不是那么难。

＆＃13;

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

＆＃13;

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

＆＃13;

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

的 Example

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>

如何将新列表项添加到无序列表

5 个答案: