代码之家 › 专栏 › 技术社区 › Gregory Schultz

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

jquery

Gregory Schultz · 技术社区 · 8 年前

我正在尝试将标题从一个div克隆到另一个div,但它会将所有标题克隆到一个div。是否有方法根据单击的项目将标题克隆到另一个div?

代码:

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

.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>

1 回复 | 直到 8 年前

Sanchit Patiyal 8 年前

您需要使用 this 关键字,而不是使用 classname 克隆时。当您使用 类的名称 它克隆了该类的所有元素。 这 将引用当前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>