How to get href attribute of links and set it to href of next sibling using jquery?

Question

I have a page with a number of dynamically generated links (through Liquid, it's a Shopify site) and they all have the same class. Each link is associated with another link (an image) and I'd like to apply the href attribute of each link to its associated second link.

I imagine I need to pull them all into an array object, then distribute them in the same order, but I'm lost. Any suggestions?

An example in HTML would be:

<a class="initial-link" href="http://some-link-1"></a>
<a href="" class="empty-link"><img src="" alt=""></a>   
<a class="initial-link" href="http://some-link-2"></a>
<a href="" class="empty-link"><img src="" alt=""></a>   
<a class="initial-link" href="http://some-link-3"></a>
<a href="" class="empty-link"><img src="" alt=""></a>   
<a class="initial-link" href="http://some-link-4"></a>
<a href="" class="empty-link"><img src="" alt=""></a>   
<a class="initial-link" href="http://some-link-5"></a>
<a href="" class="empty-link"><img src="" alt=""></a>

Basically, I want to grab the href value of each .initial-link and apply them to their corresponding .empty-link href.

Thanks

Answer 1

Iterate through the links and grab the href and then pass the href to the next link. Note that I added a1 - e2 as link text to demonstrate that each link now has the href. (the 1's are the initial hrefs and the 2's are teh ones given by the function. I also cleared out hte empty hrefs on your initial links.

 $(document).ready(function(){ $('.initial-link').each(function(){ var linkHref = $(this).attr('href'); $(this).next('.empty-link').attr('href',linkHref) }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="initial-link" href="http://some-link-1">a1</a> <a class="empty-link"><img src="" alt="">a2</a> <a class="initial-link" href="http://some-link-2">b1</a> <a class="empty-link"><img src="" alt="">b1</a> <a class="initial-link" href="http://some-link-3">c1</a> <a class="empty-link"><img src="" alt="">c1</a> <a class="initial-link" href="http://some-link-4">d1</a> <a class="empty-link"><img src="" alt="">d2</a> <a class="initial-link" href="http://some-link-5">e1</a> <a class="empty-link"><img src="" alt="">e2</a> 

Answer 2

Do a loop, select the next element using next() use attr() to get and append the url

<a class="initial-link" href="http://some-link-1"></a>
<a href="" class="empty-link"><img src="" alt=""></a>   
<a class="initial-link" href="http://some-link-2"></a>
<a href="" class="empty-link"><img src="" alt=""></a>   
<a class="initial-link" href="http://some-link-3"></a>
<a href="" class="empty-link"><img src="" alt=""></a>   
<a class="initial-link" href="http://some-link-4"></a>
<a href="" class="empty-link"><img src="" alt=""></a>   
<a class="initial-link" href="http://some-link-5"></a>
<a href="" class="empty-link"><img src="" alt=""></a>

js:

 $(document).ready(function(){
      $('.initial-link').each(function(){
        var href = $(this).attr('href');
        $(this).next().attr('href',href);
      });
    })

demo:

  $(document).ready(function() { $('.initial-link').each(function() { var href = $(this).attr('href'); $(this).next().attr('href', href); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="initial-link" href="http://some-link-1">1</a> <a href="" class="empty-link">e1 <img src="" alt=""> </a> <a class="initial-link" href="http://some-link-2">2</a> <a href="" class="empty-link">e2 <img src="" alt=""> </a> <a class="initial-link" href="http://some-link-3">3</a> <a href="" class="empty-link">e3 <img src="" alt=""> </a> <a class="initial-link" href="http://some-link-4">4</a> <a href="" class="empty-link">e4 <img src="" alt=""> </a> <a class="initial-link" href="http://some-link-5">5</a> <a href="" class="empty-link">e5 <img src="" alt=""> </a> 

or loop over the empty link and select the href of the previous link (initial-link) using prev() and attr() :

$(document).ready(function(){
      $('.empty-link').each(function(){
        var href = $(this).prev().attr('href');
        $(this).attr('href',href);
      });
    })

demo:

 $(document).ready(function(){ $('.empty-link').each(function(){ var href = $(this).prev().attr('href'); $(this).attr('href',href); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="initial-link" href="http://some-link-1">1</a> <a href="" class="empty-link">e1 <img src="" alt=""> </a> <a class="initial-link" href="http://some-link-2">2</a> <a href="" class="empty-link">e2 <img src="" alt=""> </a> <a class="initial-link" href="http://some-link-3">3</a> <a href="" class="empty-link">e3 <img src="" alt=""> </a> <a class="initial-link" href="http://some-link-4">4</a> <a href="" class="empty-link">e4 <img src="" alt=""> </a> <a class="initial-link" href="http://some-link-5">5</a> <a href="" class="empty-link">e5 <img src="" alt=""> </a> 

Note:: remove the empty href from the initial-link you already have a href attribute

Answer 3

You can iterate all .empty-link using .attr() and get href attribute of previous link ( .initial-link ) in loop.

 $(".empty-link").attr("href", function(){ return $(this).prev(".initial-link").attr("href"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="initial-link" href="http://some-link-1">initial</a> <a href="" class="empty-link"> <img src="" alt="">empty </a> <a class="initial-link" href="http://some-link-2">initial</a> <a href="" class="empty-link"> <img src="" alt="">empty </a> <a class="initial-link" href="http://some-link-3">initial</a> <a href="" class="empty-link"> <img src="" alt="">empty </a> <a class="initial-link" href="http://some-link-4">initial</a> <a href="" class="empty-link"> <img src="" alt="">empty </a> <a class="initial-link" href="http://some-link-5">initial</a> <a href="" class="empty-link"> <img src="" alt="">empty </a>