Comment cloner un élément et ajouter à une div spécifique?

Question

J'ai une page qui a quelques miniatures d'image qui, lorsqu'elles sont cliquées, elles sont clonées et annexées dans un autre élément. Le problème dans lequel je cours est que tous les éléments dont j'ai besoin appendTo Tous ont la même classe. Donc, si je clique sur une vignette, il est ajouté à chaque élément qui a la classe view_full_img. Voici le HTML avec lequel je dois travailler. Les cibler simplement avec différentes classes ne fonctionneront pas pour moi, ce HTML est généré par Drupal.

<div class="view_full_img"></div>
<div class="thumbs">
    <div class="img blue"></div>
    <div class="img green"></div>
    <div class="img yellow"></div>
</div>

<div class="view_full_img"></div>
<div class="thumbs">
    <div class="img red"></div>
    <div class="img purple"></div>
    <div class="img orange"></div>
</div>

Voici ma jQuery ..

$(".thumbs div").click(function(){
    $(".view_full_img div").remove();
    $(this).clone().appendTo(".view_full_img");
});

Ce que je veux arriver, c'est que lorsque je clique sur l'un des .thumbs divs je veux qu'il soit cloné dans le .view_full_img div qui est directement au-dessus. J'ai essayé d'utiliser des combinaisons de closest() prev() parent() etc et je ne peux tout simplement pas trouver quelque chose qui fonctionne.

Voici un jsfiddle ...http://jsfiddle.net/dmcgrew/uetv6/

Answer 1

$(".thumbs div").click(function () {
    var t = $(this);
    t.appendTo(t.parent().prev(".view_full_img"));
});

Exemple

Answer 2

Vous avez besoin parent(), alors prev():

$(".thumbs div").click(function () {
    $(this).parent().prev(".view_full_img").empty().append($(this).clone());
});