$(".thumbs div").click(function () {
var t = $(this);
t.appendTo(t.parent().prev(".view_full_img"));
});
Como clonar um elemento e anexar a uma div específica?
-
29-07-2022 - |
Pergunta
Eu tenho uma página que tem algumas miniaturas de imagem que, quando clicadas, elas são clonadas e anexadas a outro elemento. A questão em que estou concorrendo é que todos os elementos que eu preciso appendTo
Todos têm a mesma classe. Então, se eu clicar em uma miniatura, ele será anexado a todos os elementos que têm a classe view_full_img
. Aqui está o HTML com o qual tenho que trabalhar. Simplesmente direcioná -los com diferentes classes não funcionará para mim, este HTML é gerado pelo 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>
Aqui está meu jQuery ..
$(".thumbs div").click(function(){
$(".view_full_img div").remove();
$(this).clone().appendTo(".view_full_img");
});
O que eu quero acontecer é que, quando clico em um dos .thumbs
divs eu quero que seja clonado no .view_full_img
div isso está diretamente acima dele. Eu tentei usar combinações de closest()
prev()
parent()
etc e simplesmente não consigo criar algo que funcione.
Aqui está um jsfiddle ...http://jsfiddle.net/dmcgrew/uetv6/
Solução 2
Outras dicas
Você precisa parent()
, então prev()
:
$(".thumbs div").click(function () {
$(this).parent().prev(".view_full_img").empty().append($(this).clone());
});