CODEWITHSUNDEEP
javascripthtmljquerycsswordpress
nasir
nasir

Reputation: 149

Clone anchor tag link with text in div

$( ".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>

I want to show new text 'View More' with same link in the div. Now it is showing all links in same div with 'View More' text.

Upvotes: 1

Views: 175

Answers (2)

SKeurentjes
SKeurentjes

Reputation: 1878

The problem is that you are prepending your cloned element to each .post-text element. So every .post-text will have all cloned elements.

Create a function that runs through each .post-title element.

$('.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>

Upvotes: 3

Avinash Dalvi
Avinash Dalvi

Reputation: 9301

You have to just loop through using class post-text and pick nested child element using .find() function and apply logic.

//$( ".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>

Upvotes: 0

Related Questions