如何克隆元素并附加到特定的div？

Question

I have a page that has a couple image thumbnails that when clicked on they get cloned and appended into another element. The issue that I'm running in to is that all of the elements that I need to appendTo all have the same class. So if I click one thumbnail it gets appended to every single element that has the class view_full_img . Here is the HTML that I have to work with. Simply targeting these with different classes is not going to work for me, this HTML is generated by 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>

Here's my jQuery..

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

What I want to have happen is that when I click one of the .thumbs divs I want it to get cloned into the .view_full_img div that is directly above it. I've tried using combinations of closest() prev() parent() etc and just can't come up with something that works.

Here's a jsfiddle... http://jsfiddle.net/dmcgrew/UeTv6/

Answer 1

You need parent() , then prev() :

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

Answer 2

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

Example