CODEWITHSUNDEEP
jqueryappendclone
kurts
kurts

Reputation: 41

Clone, append and remove

I have a couple of items as such

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

I am trying to clone figcaption h3 so that when the item is clicked the figcaption h3 is appended to overlay and when another item is clicked the title of the previous item is removed and the title of the next clicked cloned and appended... Sure I could avoid using jQuery but there are academic reasons for solving problems!

My crude attempt is as follows

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

The problem is, every h3 title is appended to its overlay when any item is clicked. Also the appended clone is not removed totally. The title is re-cloned every time and there is always one cloned left. Is cloning the title even the best method or maybe using html()?

Upvotes: 0

Views: 344

Answers (1)

Douwe de Haan
Douwe de Haan

Reputation: 6646

You could do the following:

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

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

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

This grabs only the H3 of the clicked element and appends it to the span.

Upvotes: 1

Related Questions