克隆、附加和删除

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。附加的克隆也没有完全删除。标题每次都是re-cloned，而且总是剩下一个克隆。克隆标题是最好的方法还是使用 html()?

Answer 1

您可以执行以下操作：

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

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

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

这仅抓取被单击元素的 H3 并将其附加到跨度。

克隆、附加和删除

Clone, append and remove

jquery

append

clone