使用 .append() 时原始对象消失答案

【问题标题】：Original object disappear when .append() is used使用 .append() 时原始对象消失
【发布时间】：2013-03-12 20:41:56
【问题描述】：

我制作了一个快速的“添加到收藏夹”类型的程序来练习。您单击“收藏夹”框并将其添加到侧边栏。

这里是 JSFiddle：http://jsfiddle.net/LCBradley3k/sdKgP/

Javascript：

$(document).ready(function(){
    var favorites = [];
    var counter = 0;

    $('#container, #container2, #container3').click(function(){
       favorites.push($(this))            
        $('.favorite').append(favorites);
    });  
});

我希望它继续做它所做的事情，但不要让原来的容器消失。

另外，与其说$(container 1, 2, 3, etc)，有没有办法让它知道点击了哪个容器，然后移动那个特定的容器。如果我有 50 个容器会怎样？我不想一一列举。

【问题讨论】：

标签： javascript jquery arrays append push

【解决方案1】：

这是工作的 JSFiddle http://jsfiddle.net/9Dmcg/3/

给容器一个类并绑定到该类。

$('.containers').bind('click', function(){

    favorites.push($(this).clone())

    $('.favorite').append(favorites);
});

看起来 jcubic 具有正确的克隆语法

【讨论】：

你的意思是把所有的容器都包在一个div里？
只有一个人可以回答这两个问题，但我会分叉一个新的小提琴，让 OP 更容易理解。
@JamesMitchell 不，为什么要包装所有容器？您希望在单击任何容器时执行该操作。创建一个容器类并将该类放在每个新容器上。这样它就会绑定到点击的实际容器，允许您使用 $(this) 捕获它
@BinaryTox1n 好点。我添加了一个有效的 JSFiddle 以使其更加明显
现在有办法删除侧栏中的项目（然后让其他项目相应地更改位置吗？）

【解决方案2】：

尝试使用 jQuery 的clone():

$('#container, #container2, #container3').click(function(){
  $(this).clone().appendTo('.favorite');
});

【讨论】：

【解决方案3】：

可以使用克隆jquery函数http://jsfiddle.net/sdKgP/1/

$('#container, #container2, #container3').click(function(){

    favorites.push($(this).clone())

    $('.favorite').append(favorites);
});

【讨论】：

【解决方案4】：

试试这个http://jsfiddle.net/sdKgP/25/

你应该得到容器的 id。在您的情况下，您可能有很多书签容器，所以您不想为每个书签容器添加 css。所以你也需要改变你的CSS。

CSS

#sidenav {
height:700px;
width:250px;
border: 1px solid rgb(150,150,150);
position:absolute;
display:inline;
float: right;
left: 125px;
}

.container {
height:50px;
width:75px;
border:1px solid #000;
position:relative;
margin-bottom:10px;
}

DOM

<div style="float:left">
<div class="container">
 Favorite
 </div>

<div class="container">
  Favorite
</div>

<div class="container">
  Favorite
 </div>
</div>
 <div>
 <div id="sidenav">
  <div class="favorite"> </div>
 </div>
</div>

JS：

 $(document).ready(function(){
   var favorites = [];
   var counter = 0;
  $('.container').click(function(){
    favorites.push($(this).clone());
    $('.favorite').append(favorites);
 });
});

【讨论】：