克隆标题将所有标题复制到div

Question

我试图将div中的标题克隆到另一个div中，但它将所有标题克隆为div。有没有办法根据点击的项目将标题克隆到另一个div？

代码：

＆＃13;

＆＃13;

$(".front-playpause").on("click", function() {
   $(".ep-title").clone().appendTo($(".package"));
});

＆＃13;

.front-playpause {background:black;width:10px;height:10px}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<article>
<div class="front-playpause"></div>
<div class="ep-id-right">
<div class="ep-num">episode number</div>
<h1 class="ep-title">title post</h1>
 </div>
</article>

<article>
<div class="front-playpause"></div>
<div class="ep-id-right">
<div class="ep-num">episode number</div>
<h1 class="ep-title">title post</h1>
 </div>
</article>

<article>
<div class="front-playpause"></div>
<div class="ep-id-right">
<div class="ep-num">episode number</div>
<h1 class="ep-title">title post</h1>
 </div>
</article>

<div class="package">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要使用this关键字，而不是在克隆时使用classname。当您使用classname时，它会克隆该类的所有元素。 this将引用当前的HTML元素。

$(".front-playpause").on("click", function() {
   $(".package").append($(this).parent().find('.ep-title').html());
});

.front-playpause {background:black;width:10px;height:10px}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<article>
<div class="front-playpause"></div>
<div class="ep-id-right">
<div class="ep-num">episode number</div>
<h1 class="ep-title">title post</h1>
 </div>
</article>

<article>
<div class="front-playpause"></div>
<div class="ep-id-right">
<div class="ep-num">episode number</div>
<h1 class="ep-title">title post</h1>
 </div>
</article>

<article>
<div class="front-playpause"></div>
<div class="ep-id-right">
<div class="ep-num">episode number</div>
<h1 class="ep-title">title post</h1>
 </div>
</article>

<div class="package">

</div>