如何移动一个<li>从一个<ul>在另一个<ul>在使用 JQuery 的单独 div 中</ul></ul></li>

Question

So i have two containers which contain separate ul .所以我有两个包含单独ul的容器。 My objective is to move one of the child <li> from one ul to the other.我的目标是将其中一个子<li>从一个ul移动到另一个。

I currently have a delete function on the li within the ul using jquery, as below:我目前使用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>

I am really new to this so just trying to personalize a project.我对此真的很陌生，所以只是想个性化一个项目。

Answer 1

Instead of removing, you should append the element to the target container, and then use fadeIn to show it again.而不是删除，你应该 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>

如何移动一个<li>从一个<ul>在另一个<ul>在使用 JQuery 的单独 div 中</ul></ul></li>

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-24 11:07:18

如何移动一个<li>从一个<ul>在另一个<ul>在使用 JQuery 的单独 div 中</ul></ul></li>

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-24 11:07:18

解决方案1
1 已采纳 2020-06-24 11:07:18