ul-li。 下面是新的等號行（li）

Question

有什么建議么？

1. 我希望在使用“新建”按鈕時在同一個li下創建一個新li。 在我的示例中，.append在底部創建新的li。

2. 按鈕（新，子，上，下和x）應該出現在新的li中，怎么辦？

如果這個問題需要一個很大且相當實質性的答復，我表示歉意，我不希望有人給它。 然后，如果這些列表屬性需要某種其他類型的編碼（.net等），我很高興得到啟發...

謝謝大衛

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <ul style="text-decoration:none"> <li>.............. <button id="btn2">New</button> <button id="btn3">Sub</button> <button class="up">Up</button> <button class="down">Down</button> <button>X</button> </li> <script> $(document).ready(function() { $("#btn2").click(function() { $("ul").append("<li>..............</li>"); }); }); </script> <script> $(document).ready(function() { $("#btn3").click(function() { $("ul").append("<ul><li>..............</li>"); }); }); </script> <script> $('.up').click(function() { $(this).parent().insertBefore($(this).parent().prev()); }); $('.down').click(function() { $(this).parent().insertAfter($(this).parent().next()); }); </script> <script> $("button").click(function() { $("<li>").remove(); }); </script> </ul> 

Answer 1

而不是附加到ul ，而是將其插入當前的li元素之后。

您還可以克隆並添加按鈕，並使用事件委托來處理新按鈕中的單擊

 $(document).ready(function() { $("ul").on('click', '.btn2', function() { $("<li/>", { text: '..............' }).append($(this).parent().children('button').clone()).insertAfter(this.parentNode); }); }); $(document).ready(function() { $("#btn3").click(function() { $("ul").append("<ul><li>..............</li>"); }); }); $('ul').on('click', '.up', function() { $(this).parent().insertBefore($(this).parent().prev()); }); $('ul').on('click', '.down', function() { $(this).parent().insertAfter($(this).parent().next()); }); $('ul').on('click', '.remove', function() { $(this).parent().remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <ul style="text-decoration:none"> <li>.............. <button class="btn2">New</button> <button class="btn3">Sub</button> <button class="up">Up</button> <button class="down">Down</button> <button class="remove">X</button> </li> </ul> 

Answer 2

您好，現在像這樣上課

我已經習慣了.prependTo （）. closest和.remove（）

 $(document).ready(function() { $(document).on('click','.btn2',function() { var thisLi = $(this).closest('li').clone(); $(thisLi).prependTo('ul'); }); $(document).on('click','.remove',function() { $(this).closest('li').remove(); }); // $('.up').click(function() { // $(this).parent().insertBefore($(this).parent().prev()); // }); // $('.down').click(function() { // $(this).parent().insertAfter($(this).parent().next()); // }); // $("button").click(function() { // $("<li>").remove(); // }); // }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <ul style="text-decoration:none"> <li>.............. <button class="btn2">New</button> <button class="btn3">Sub</button> <button class="up">Up</button> <button class="down">Down</button> <button class="remove">X</button> </li> </ul> 

Answer 3

 $(function(){ $(document).on('click', '.new', newItem); $(document).on('click', '.sub', subItem); $(document).on('click', '.remove', removeItem); $(document).on('click', '.up', moveUpItem); $(document).on('click', '.down', moveDownItem); }); function newItem(){ var $btn = $(this), $li = $btn.closest('li').clone(), $ul = $btn.closest('ul'), count = $ul.find('li').length + 1; $li.find('span').text(count); $li.find('ul').remove(); $ul.append($li); } function subItem(){ var $btn = $(this), $li = $btn.closest('li'), $liClone = $btn.closest('li').clone(), hasSubs = $li.find('ul').length > 0, $ul = hasSubs ? $li.find('ul') : $('<ul>'); var countSubs = $ul.find('li').length + 1; $liClone.addClass('sub-item'); $liClone.find('span').text(countSubs); $liClone.find('ul').remove(); $ul.append($liClone); if(!hasSubs) $li.append($ul); } function removeItem(){ var $li = $(this).closest('li'), liCount = $li.closest('ul').find('li').length; if(liCount > 1 || $li.hasClass('sub-item')) $li.remove(); else alert('este é o ultimo.'); } function moveUpItem () { var $li = $(this).closest('li'), $ul = $li.closest('ul'), index = $li.index() + 1; if(index > 1){ var $temp = $li.detach(); $ul.find('li:nth-child('+(index - 1)+')').before($temp); } } function moveDownItem () { var $li = $(this).closest('li'), $ul = $li.closest('ul'), count = $ul.find('li').length, index = $li.index() + 1; if(index < count){ var $temp = $li.detach(); $ul.find('li:nth-child('+(index)+')').after($temp); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <ul> <li> <span>1</span> <button class="new">New</button> <button class="sub">Sub</button> <button class="up">Up</button> <button class="down">Down</button> <button class="remove">X</button> </li> </ul>