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

Question

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

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

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

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

做一个循环，select 下一个元素使用 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() 和 [=18 遍历空的 link 和 select 前一个 link（初始-link）的 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>

注意::从初始-link中删除空 href 您已经有一个 href 属性

Answer 3

您可以使用 .attr() 迭代所有 .empty-link 并在循环中获取前一个 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>

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

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

html

javascript

jquery

attributes

href