Kevmon Kevmon - 2 months ago 8
jQuery Question

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

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

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