Clone, добавлять и удалять

Question

У меня есть несколько вещей, как такой

<div class="item"> 
    <figure> 
    <span class="overlay"></span> 
    <img...> 
    <figcaption> 
     <h3>Title</h3> 
    </figcaption> 
    </figure> 
</div> 

Я пытаюсь клонировать figcaption h3 так, что, когда пункт щелкнул figcaption h3 добавляется к overlay и когда другой элемент щелкнул название предыдущего элемента удаляется, и название следующего клика клонировано и добавлено ... Конечно, я мог бы избежать использования jQuery, но есть академические причины для решения проблем!

Моей грубая попытка выглядит следующим образом

$(".item").on("click", function() { 
    $(".overlay h3").remove();  
    var $title = $('.overlay'); 
     $('figcaption h3').each(function(i) { 
     $(this).clone().appendTo($title.eq(i)); 
    }); 
}); 

Проблема заключается в том, каждом h3 заголовка добавляются к его overlay при нажатии на любой пункт. Также добавленный клон не полностью удаляется. Название перекраивается каждый раз, и всегда остается один клонированный слева. Является ли клонирование названия даже лучшим методом или, возможно, использует html()?

Answer 1

Вы можете сделать следующее:

$(".item").on("click", function() { 
    $(".overlay h3").remove();  

    $h3 = $(this).find('h3').clone(); 

    $(this).find('.overlay').html($h3); 
}); 

Это захватывает только Н3 нажатого элемента и присоединяет его к размаху.