Как добавить новый элемент списка неупорядоченного список

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

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

Answer 3

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 4

Ну это не так трудно.

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>

Answer 5

Уже большое количество ответов, но просто хотел бы добавить свое решение. Для меня было интересным упражнением, чтобы понять, как это сделать.

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