CODEWITHSUNDEEP
javascriptjqueryclone
user4650164
user4650164

Reputation: 99

jquery clone a link (once per div)

I have a set of divs, and need to clone the link from the top and insert into the last div (mobile-link). It is either cloning the links from all of the divs, and then inserting all of them at once, or if I use :eq(0), it's putting the first link into all of the divs.

<div class="course"><a href="/accounting">Accounting</a></div>
<div class="start-date">1-1-2017</div>
<div class="credits">4</div>
<div class="location">Online</div>
<div class="mobile-link"></div>

<div class="course"><a href="/business">Business</a></div>
<div class="start-date">1-1-2017</div>
<div class="credits">3</div>
<div class="location">Online/Campus</div>
<div class="mobile-link"></div>

<script>
    $(".course a:eq(0)").clone().appendTo(".mobile-link");        
</script>

What do I need to change to make this work properly?

Upvotes: 1

Views: 154

Answers (3)

The Process
The Process

Reputation: 5953

Append method can take a function as argument, and here it is appending to the each .mobile-link first <a> from his previous .course div

$(".mobile-link").append(function(){
  return $(this).prevAll('.course:first').find('a:first').clone(); 
});

Check the below snippet 

$(".mobile-link").append(function(i) {
  return $(this).prevAll('.course:first').find('a:first').clone();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="course"><a href="/accounting">Accounting</a>
</div>
<div class="start-date">1-1-2017</div>
<div class="credits">4</div>
<div class="location">Online</div>
<div class="mobile-link"></div>

<div class="course"><a href="/business">Business</a>
</div>
<div class="start-date">1-1-2017</div>
<div class="credits">3</div>
<div class="location">Online/Campus</div>
<div class="mobile-link"></div>

Upvotes: 1

isherwood
isherwood

Reputation: 61092

You need to process each anchor separately:

$(".course").each(function() {
    var myLink = $(this).find('a').clone();
    $(this).nextAll('.mobile-link').first().append(myLink);
});

Demo fiddle

Upvotes: 2

Nemanja Todorovic
Nemanja Todorovic

Reputation: 2800

I beleive that you should use last (If I understood question correctly):

var lastDiv = $(".mobile-link").last();
$(".course a:eq(0)").clone().appendTo(lastDiv);

Here is jsfiddle: fiddle

Upvotes: 0

Related Questions