如何克隆元素并将其附加到特定的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 我希望它被克隆到 .view_full_img 直接在其上方的div。我尝试使用的组合 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());
});