¿Cómo clonar un elemento y agregar a un DIV específico?

Question

Tengo una página que tiene un par de miniaturas de imagen en las que cuando se hace clic, se clonan y se agreguen en otro elemento. El problema en el que me estoy ejecutando es que todos los elementos que necesito appendTo Todos tienen la misma clase. Entonces, si hago clic en una miniatura, se agrega a cada elemento que tiene la clase view_full_img. Aquí está el HTML con el que tengo que trabajar. Simplemente apuntar a estos con diferentes clases no funcionará para mí, este HTML es generado por 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>

Aquí está mi jQuery ..

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

Lo que quiero que suceda es que cuando haga clic en uno de los .thumbs Divs, quiero que sea clonado en el .view_full_img div que está directamente sobre él. He intentado usar combinaciones de closest() prev() parent() etc y simplemente no se puede encontrar algo que funcione.

Aquí hay un jsfiddle ...http://jsfiddle.net/dmcgrew/uetv6/

Answer 1

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

Ejemplo

Answer 2

Necesitas parent(), después prev():

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