요소를 복제하고 특정 DIV에 추가하는 방법은 무엇입니까?

Question

클릭 할 때 복제되어 다른 요소로 추가되는 몇 개의 이미지 썸네일이있는 페이지가 있습니다. 내가 실행하는 문제는 내가 필요한 모든 요소입니다. appendTo 모두 같은 수업을 가지고 있습니다. 따라서 하나의 썸네일을 클릭하면 클래스가있는 모든 단일 요소에 추가됩니다. view_full_img. 다음은 함께 작업 해야하는 HTML입니다. 단순히 다른 클래스로 이것들을 목표로하는 것은 나에게 효과가 없을 것입니다.이 HTML은 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>

여기 내 jquery ..

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

내가 일어나고 싶은 것은 내가 중 하나를 클릭 할 때 .thumbs divs 나는 그것이 복제되기를 원한다 .view_full_img 바로 위에 있습니다. 조합을 사용해 보았습니다 closest() prev() parent() 등은 효과가있는 것을 생각해 낼 수 없습니다.

여기 jsfiddle이 있습니다 ...http://jsfiddle.net/dmcgrew/uetv6/

Answer 1

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

예시

Answer 2

당신은 필요합니다 parent(), 그 다음에 prev():

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