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是初始hrefs，2是函数给出的。我还清除了初始链接上的空hrefs。

$(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（初始链接）：

$(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，并在循环中获取上一个链接（href）的.initial-link属性。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: