悬停时jQuery克隆迭代div

我有一系列的div，我想将它们克隆并在悬停时显示/隐藏到另一个div。虽然我已经知道了如何使用jQuery克隆一个或全部div，但我仍然非常关注如何迭代克隆每个div

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>

此位可以很好地克隆悬停时的每个.src div（而不是每个）.src div），但是：

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

---

总而言之，我希望当我将鼠标悬停在每个.src div上时将其克隆到#dest div，然后当我将鼠标移出时将其消失。然后下一个.src div应该在hover上执行相同的操作，等等…每个sourceN div没有单独的脚本。请，哦，聪明的人，我做错了什么？

您的假设是正确的，您需要使用$（this）符号

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

可以吗？

你试过这个吗

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

---

克隆div时，不要使用类选择器

'.src'

，只需使用

这个

，它应该只对悬停的div起作用

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

---

这就是我的理解。我的英语不好。这里有一个演示：谢谢！这在我提供的简化html示例上确实有效，但在我的live站点上似乎不起作用。也许是因为删除ID？也许我忘了一个“；”在“remove（）”之后。这么快又简单。非常感谢。谢谢英雄所见略同——你和rkw。是的，这个有效。

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

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