为什么jQuery appendTo会删除现有的列表项

Why jQuery appendTo removes the existing list item?

本文关键字：列表 删除 jQuery appendTo 为什么      更新时间：2023-09-26

我正在处理一个项目，在该项目中，我需要在dblclick上或按add按钮将列表项从list1添加到list2。到目前为止，我已经完成了这项工作。

 $().ready(function() {  
var classHighlight = 'highlight';
var $thumbs = $('ul li').click(function(e) {
    e.preventDefault();
    $thumbs.removeClass(classHighlight);
    $(this).addClass(classHighlight);
});
$('#select1').on ("dblclick","li", function(){
return $(this).appendTo('#select2').removeClass('highlight'); 
});
$('#select2').on ("dblclick","li", function(){
return $(this).remove(); 
});
   $('#add').click(function() {  
   $('#select1 .highlight').appendTo('#select2').removeClass('highlight'); 
   });  
   $('#remove').click(function() {  
     $('#select2 .highlight').remove();
   });  
  });

但是，如果你看到点击列表1项目也会将点击的项目从列表1中删除，我不想这样做。我只需要将它从列表1复制到列表2。有人能帮我吗？谢谢

当您将现有元素附加到新的父元素时，您会移动它；它不会被复制。您应该先克隆元素，然后附加克隆的元素：

$('#select1').on ("dblclick","li", function(){
  return $(this).clone().appendTo('#select2').removeClass('highlight'); 
});

和

$('#add').click(function() {  
 $('#select1 .highlight').clone().appendTo('#select2').removeClass('highlight'); 
});

工作演示

您使用clone（）函数来帮助编写代码

$('#select1').on ("dblclick","li", function(){
   return $(this).clone().appendTo('#select2').removeClass('highlight'); 
});

此处显示完整代码http://jsfiddle.net/s41txkng/4/

https://api.jquery.com/clone/

相关文章：