$(".thumbs div").click(function () {
var t = $(this);
t.appendTo(t.parent().prev(".view_full_img"));
});
How to clone an element and append to a specific div?
-
29-07-2022 - |
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/
Solution 2
OTHER TIPS
You need parent()
, then prev()
:
$(".thumbs div").click(function () {
$(this).parent().prev(".view_full_img").empty().append($(this).clone());
});