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 div时，我希望它被克隆到直接在其上方的.view_full_img div中。我尝试过使用closest() prev() parent()等的组合，但却无法提出有效的方法。

这是一个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"));
});

Example

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

2 个答案: