jquery - 使用 jquery each 传输链接并将其分配给新元素

Question

我对如何使用 jquery 中的每个存储值从链接感到困惑，然后将其分配给链接元素。
这是标记。

<div class="box">
<a href="linkhere">Title</a>
<a href="transferhere" class="mybtn">New Link</a>
</div>

<div class="box">
<a href="linkhere">Title</a>
<a href="transferhere" class="mybtn">New Link</a>
</div>

<div class="box">
<a href="linkhere">Title</a>
<a href="transferhere" class="mybtn">New Link</a>
</div>

这是我所做的

$(".box").each(function(){
        var hyperLinkValue = $('.box > a').attr('href');
        $('a.mybtn').attr("href", hyperLinkValue);
});

但它似乎不起作用？。有什么想法吗？

Answer 1

您当前的逻辑是选择每个 a和 .mybtn循环的每次迭代中 DOM 中的元素。要解决此问题，您应该使用 this关键字来引用 each() 的当前迭代中的元素仅循环:

$(".box").each(function() {
  var hyperLinkValue = $(this).find('a').attr('href');
  $(this).find('a.mybtn').attr("href", hyperLinkValue);
});

话虽如此，您可以简化向 attr() 提供函数的逻辑。它返回要设置的值:

$("a.mybtn").attr('href', function() {
  return $(this).prev('a').attr('href');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <a href="linkhere">Title</a>
  <a href="transferhere" class="mybtn">New Link</a>
</div>

<div class="box">
  <a href="linkhere">Title</a>
  <a href="transferhere" class="mybtn">New Link</a>
</div>

<div class="box">
  <a href="linkhere">Title</a>
  <a href="transferhere" class="mybtn">New Link</a>
</div>