javascript - 使用 .append() 时原始对象消失

Question

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

这是 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 个容器会怎样？我不想一一列举。

Answer 1

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

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

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

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

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

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

Answer 2

试试这个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);
 });
});

Answer 3

尝试使用 jQuery 的clone()：

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

Answer 4

您可以使用克隆 jquery 功能http://jsfiddle.net/sdKgP/1/

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

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

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