如何使用jquery将next元素的id设置为链接的href属性

How to set id of next element into href attribute of link using jquery?

本文关键字：设置 链接 href 属性 id jquery next 元素 何使用      更新时间：2023-09-26

我必须分配给许多html href属性(一个标签)，它们各自的id值紧随其后。在我的代码中，我只得到一个唯一的值(第一个)。非常感谢。想把它们做为

$(".anchor").attr("href","#"+($(".anchor").closest("div").next("div").attr("id")));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <a class="anchor">Get anchor 1</a>
</div>
<div id="link1">
    <p>A paragraph</p>
</div>
<div>
    <a class="anchor">Get anchor 2</a>
</div>
<div id="link2">
    <p>Another paragraph</p>
</div>

您需要所选元素的实例。可以用attr(attrName, function)来做

$(".anchor").attr("href",function(){
    return '#' + $(this).closest("div").next("div").attr("id");
});

Jquery .attr()与函数在第二个参数，迭代选定的元素，并改变其属性。用.parent()代替.closest("div") 

$(".anchor").attr("href", function(){
    return "#"+$(this).parent().next("div").attr("id");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <a class="anchor">Get anchor 1</a>
</div>
<div id="link1">
    <p>A paragraph</p>
</div>
<div>
    <a class="anchor">Get anchor 2</a>
</div>
<div id="link2">
    <p>Another paragraph</p>
</div>

遍历具有类anchor的所有a标记，并使用$(this).parent("div").next("div").attr("id"))选择器获取a标记的链接。

请检查下面的代码片段。

$(".anchor").each(function(){
  $(this).attr("href","#"+($(this).parent("div").next("div").attr("id")));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><a class="anchor">Get anchor 1</a>
</div>
<div id="link1">
<p>A paragraph</p>
</div>
<div><a class="anchor">Get anchor 2</a>
</div>
<div id="link2">
<p>Another paragraph</p>
</div>

使用jQuery each或任何循环，如for, while等来迭代所有。anchor元素。

相关文章：