Клонировать ссылку тега привязки с текстом в div

Question

$( ".post-title > a" ).clone().prependTo( ".post-text" ).text("View More");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.google.com/">Google</a> 
</div> 
</div> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.yahoo.com/">Yahoo</a> 
</div> 
</div> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.msn.com/">MSN</a> 
</div> 
</div>

Я хочу показать новый текст «Еще» с той же ссылкой в ​​div. Теперь он показывает все ссылки в одном блоке с текстом «Еще».

Answer 1

Проблема в том, что вы добавляете свой клонированный элемент к каждому элементу .post-text. Таким образом, каждый .post-text будет иметь все клонированные элементы.

Создайте функцию, которая проходит через каждый .post-title элемент.

$('.post-title').each(function () {
$(this).find('> a').clone().prependTo($(this).closest('.post-text')).text('View more');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.google.com/">Google</a> 
</div> 
</div> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.yahoo.com/">Yahoo</a> 
</div> 
</div> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.msn.com/">MSN</a> 
</div> 
</div>

Answer 2

Вам нужно просто l oop с помощью класса post-text и выбрать вложенный дочерний элемент с помощью функции .find() и применить logi c.

//$( ".post-title > a" ).clone().prependTo( ".post-text" ).text("View More");



$('.post-text').each(function(i, obj) {
var postTitleElem = $(this).find(".post-title > a");
 console.log(postTitleElem);
  $(postTitleElem).clone().prependTo(this).text("View More");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<div class="post-text" > 
<div class="post-title"> 
<a href="https://www.google.com/" >Google</a> 
</div> 
</div> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.yahoo.com/">Yahoo</a> 
</div> 
</div> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.msn.com/">MSN</a> 
</div> 
</div>