如何使用jquery获取链接的href属性并将其设置为下一个兄弟的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

做一个循环，使用next()选择下一个元素使用attr()获取并附加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);
      });
    })

演示：

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

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

遍历链接并获取href，然后将href传递给下一个链接。请注意，我添加了 a1 - e2 作为链接文本，以证明每个链接现在都有 href。 （1 是初始的href，2 是函数给出的href。我还清除了初始链接上的空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 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>