Wie klonen Sie ein Element und hängen an eine bestimmte DIV an?

Question

Ich habe eine Seite, auf der ein paar Vorschaubilder im Bild haben, die beim Klicken auf ein anderes Element klonen und in ein anderes Element angehängt werden. Das Problem, in das ich lasse, ist, dass alle Elemente, die ich benötigt appendTo Alle haben die gleiche Klasse. Wenn ich also auf ein Miniaturbild klicke, wird es an jedes einzelne Element angehängt, das die Klasse hat view_full_img. Hier ist das HTML, mit dem ich arbeiten muss. Wenn Sie diese nur mit verschiedenen Klassen abzielen, wird diese HTML von Drupal nicht funktionieren.

<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>

Hier ist meine jQuery ..

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

Was ich haben möchte, ist, dass ich, wenn ich auf einen der klicke .thumbs Divs Ich möchte, dass es in die kloniert wird .view_full_img Div, das direkt darüber liegt. Ich habe versucht, Kombinationen von zu verwenden closest() prev() parent() usw. Und kann einfach etwas finden, das funktioniert.

Hier ist ein JSFiddle ...http://jsfiddle.net/dmcgrew/uetv6/

Answer 1

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

Beispiel

Answer 2

Du brauchst parent(), dann prev():

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