[英]How to move a <li> from a <ul> ato another <ul> in a separate div using JQuery
所以我有兩個包含單獨ul的容器。 我的目標是將其中一個子<li>從一個ul移動到另一個。
我目前使用jquery在ul內的li上刪除function，如下：
//check off specific todos $("ul").on("click", "li", function(){ $(this).toggleClass("completed"); }); // x to delete todo /mark as complete $("ul").on("click", "span", function(event){ $(this).parent().fadeOut(500, function(){ $(this).remove(); }); event.stopPropagation(); }); //text input $("input[type='text']").keypress(function(event){ if(event.which === 13){ var todotext = $(this).val(); $(this).val(""); // create a new LI $("ul").append("<li><span><i class='fas fa-trash'></i></span> " + todotext + "</li>"); } }); //toggles input box $(".fa-plus").click(function(){ $("input[type='text']").fadeToggle(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"> <body> <div id="container"> <h1>Task List <i class="fas fa-plus"></i></h1> <input placeholder="Add new Task" type="text"> <ul> <li><span><i class="fas fa-check"></i></span> hello</li> </ul> </div> <div id="container-2"> <h1>Completed Tasks <i class="fas fa-check-circle"></i></h1> <ul> </ul> </div> </body>
我對此真的很陌生，所以只是想個性化一個項目。
而不是刪除，你應該 append 元素到目標容器，然后使用fadeIn再次顯示它。
//check off specific todos $("ul").on("click", "li", function(){ $(this).toggleClass("completed"); }); // x to delete todo /mark as complete $("ul").on("click", "span", function(event){ $(this).parent().fadeOut(500, function(){ $(this).appendTo($("#container-2 ul")).fadeIn(500); }); event.stopPropagation(); }); //text input $("input[type='text']").keypress(function(event){ if(event.which === 13){ var todotext = $(this).val(); $(this).val(""); // create a new LI $("ul").append("<li><span><i class='fas fa-trash'></i></span> " + todotext + "</li>"); } }); //toggles input box $(".fa-plus").click(function(){ $("input[type='text']").fadeToggle(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"> <body> <div id="container"> <h1>Task List <i class="fas fa-plus"></i></h1> <input placeholder="Add new Task" type="text"> <ul> <li><span><i class="fas fa-check"></i></span> hello</li> </ul> </div> <div id="container-2"> <h1>Completed Tasks <i class="fas fa-check-circle"></i></h1> <ul> </ul> </div> </body>
JQuery - 如何將li移動到ul中的另一個位置？ （交換2里）
[英]JQuery - How to move a li to another position in the ul? (exchange 2 li's)
在div中查找ul，然后使用jquery將li標簽附加到該ul
[英]Finding the ul inside a div and append li tag to that ul using jquery
jQuery 選項卡：如何從選項卡 div 將類添加到單獨的 UL 選項卡？
[英]jQuery tabs: how to addClass to a separate UL tab from the tab div?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.