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 div при наведении на него курсора, а затем исчезал примышьЗатем следующий .src div должен выполнить то же самое при наведении курсора и т. Д. ... без отдельного сценария для каждого источника N 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

Вы пробовали это?

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

Answer 4

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

Это нормально?