如何获取链接的href属性并将其设置为使用jquery的下一个兄弟的href？

Question

我有一个页面，其中包含许多动态生成的链接（通过Liquid，这是一个Shopify网站），它们都具有相同的类。 每个链接都与另一个链接（图像）相关联，我想将每个链接的href属性应用于与其关联的第二个链接。

我想我需要将它们全部拉入一个数组对象，然后以相同的顺序分配它们，但是我迷路了。 有什么建议么？

HTML中的示例为：

<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>

基本上，我想获取每个.initial-link的href值并将其应用于它们相应的.empty-link href。

谢谢

Answer 1

遍历链接并获取href，然后将href传递到下一个链接。 请注意，我添加了a1-e2作为链接文本，以证明每个链接现在都具有href。 （1是该函数给定的初始href，而2是该函数给定的。我也清除了初始链接上的空href。

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

进行循环，使用next()选择下一个元素使用attr()获取并附加网址

<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);
      });
    })

演示：

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

或循环到空链接，然后使用prev()和attr()选择上一个链接的href（初始链接attr() ：

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

演示：

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

注意：从已经具有href属性的初始链接中删除空的href

Answer 3

您可以使用.attr()迭代所有.empty-link并循环获取前一个链接（ .initial-link ）的href属性。

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