悬停上的jQuery克隆迭代div

Question

我有一系列的div，我想克隆和显示/隐藏在一个不同的div悬停。虽然我已经知道了如何用jQuery克隆一个或全部，但我仍然停留在如何迭代地克隆每一个。

HTML，本质上是：

<div id="test">
  <div id="source1" class="src">content1</div>
  <div id="source2" class="src">content2</div>
  <div id="source3" class="src">content3</div>      
</div>

<div id="dest"></div>

我认为答案可能涉及到每个函数；但是，带有“Function.prototype.apply的第二个参数必须是jquery.min.js的数组”的以下脚本错误：

$(".src").hover(function() {
 $(".src").each(function() {
  $(this).clone().appendTo('#dest');
  return false;
  $('#dest').show();        
 }, function() {
  $('#dest').hide();
  $('#dest').html('');
 });
});

但是，在悬停时克隆每个(而不是每个) .src div确实很好：

$('.src').hover(function() {
    $('.src').clone().appendTo('#dest');
    $('#dest').show();
}, function() {
    $('#dest').hide();
    $('#dest').html('');
}); 

因此，简单地说，我希望每个.src div在悬停时被克隆到#dest上，然后当我鼠标离开时就消失了。然后下一个.src div应该在悬停时执行相同的操作，因此on...without为每个sourceN div创建了一个单独的脚本。求你了，智者们，我做错什么了？

Answer 1

您的假设是正确的，您需要使用$(this)符号。

$('.src').hover(function() {
    $(this).clone().appendTo('#dest');
    $('#dest').show();
}, function() {
    $('#dest').hide();
    $('#dest').html('');
});

Answer 2

当克隆div时，不要使用类选择器'.src'，只使用this，它应该只使用悬浮的div

$('.src').hover(function() {
    $(this).clone().appendTo('#dest');
    $('#dest').show();
}, function() {
    $('#dest').hide();
    $('#dest').html('');
}); 

http://jsfiddle.net/tsb2A/

Answer 3

$('#test div').bind({
   mouseenter: function(){
       $('#dest').append($(this).clone());
   },
   mouseleave: function(){
       $('#dest #'+$(this).attr('id')).remove()
   }
});

可以吗？