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

Question

我有一个页面，其中包含几个图像缩略图，当单击它们时，它们会被克隆并附加到另一个元素中。我遇到的问题是我需要的appendTo所有元素都具有相同的类。因此，如果我单击一个缩略图，它将附加到每个具有 class 的元素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");
});

我想要发生的是，当我单击其中一个.thumbsdiv 时，我希望它被克隆到.view_full_img它正上方的 div 中。我尝试过使用closest() prev() parent()etc 的组合，但无法想出可行的方法。

这是一个 jsfiddle... http://jsfiddle.net/dmcgrew/UeTv6/

Answer 1

你需要parent()，然后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"));
});

例子