如何使用 jQuery 或 Javascript 将字符串附加到 <a href="？

Posted 2023-03-11

【中文标题】如何使用 jQuery 或 Javascript 将字符串附加到 <a href="？

【英文标题】：how to append string to <a href=" with jQuery or Javascript?

【发布时间】：2013-07-18 18:39:27

【问题描述】：

我的元素如下，

<div id="pager">
<a href="/somepath/1">First</a>
<a href="/somepath/1">Previous</a>
<a class="" href="/somepath/1">1</a>
<a class="Current" href="/somepath/2">2</a>
<a class="" href="/somepath/3">3</a>
<a href="/somepath/3">Next</a>
<a href="/somepath/20">Last</a>
</div>

我希望它在浏览器中进行如下更改。

<div id="pager">
<a href="/somepath/1?a=text">First</a>
<a href="/somepath/1?a=text">Previous</a>
<a class="" href="/somepath/1?a=text">1</a>
<a class="Current" href="/somepath/2?a=text">2</a>
<a class="" href="/somepath/3?a=text">3</a>
<a href="/somepath/3?a=text">Next</a>
<a href="/somepath/20?a=text">Last</a>
</div>

这样我就可以将“a”数据值用于下一页。 任何人都可以给我代码，里面有追加

div id="pager" -> <a> -> href="

我想用另一个 onChange 事件删除添加的文本。

提前致谢

【参考方案1】：

由于 jquery 被标记：

$('#pager a').each(function()
     this.href += '?a=text';
)

Vanilla JS 看起来像这样：

var a = document.getElementById('pager').getElementsByTagName('a'),
    length = a.length;

for(var i=0; i< length; i++)
    a[i].href += '?a=text';

【讨论】：

@Bondye .each 函数有什么问题？ "+1 最后一个没有那个 .each() 函数...人们不理解 .each().."。您发布此评论的答案，您认为代码背后发生了什么？另外，.each() 更快：jsperf.com/each-vs-function

@Karl-AndréGagnon 就我个人而言，我更喜欢将.attr() 与函数一起使用而不是.each()，因为我发现它更具可读性。但我当然不能与性能测试争论。 （我想知道 jQuery 中的一些优化是否可以解决这个问题？）

@Blazemonger 好吧，这是个人偏好，因为我更喜欢使用.each()，所以我们不能就此争论：）@Bondye 它不是循环两次，它实际上与使用函数的结果相同（就像 Blaze 的回答一样）。这里 jquery 代码中的相关部分：for ( ; i < length; i++ ) fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) ); . The only adding to the .each` 方式是一个附加的函数调用（这就是为什么每个都更快）。我认为您的评论对于 .addClass() 之类的功能更有意义，它无法循环遍历元素并在之后调用它

@Blazemonger 在旁注中，香草 js 是最慢的。知道为什么（我可能在代码中做错了什么）？

@Karl-AndréGagnon 可能与this (source code)有关

【参考方案2】：

.attr() 和许多 jQuery 函数一样，可以接受修改现有值的函数参数：

$('#pager a').attr('href',function(i,str) 
   return str + '?a=text';
);

【讨论】：

@Blazemonger 谢谢，我会接受 Karl-André Gagnon 的回答。您有 wow ans 以及如何使用另一个 onChange 事件删除添加的文本“？a=text”？

"return str.split('?')[0];"应该这样做。

@Blazemonger 谢谢，:)

【参考方案3】：

$('#pager a').each(function() 
   $(this).attr('href', $(this).attr('href') + '?a=text');
);

【讨论】：

谢谢，更新问题

【参考方案4】：

只需使用attr property。示例：-

$("a").attr("href", "http://www.google.com/")

这样就可以了。

【参考方案5】：

$("#pager").find("a").each(function()
var $this=$(this);
$this.attr("href",$this.attr("href")+"?a=text");
)

【参考方案6】：

你可以使用attr方法

$('a').attr('href', '/somepath/1?a=text');

如果您想更改特定 <a> 的 href，请给该 '' 一个唯一 ID，然后按如下方式更改其 href

$('#link').attr('href', '/somepath/1?a=text');

【参考方案7】：

试试这个代码：

$('#pager a').each(function()
    this.href += '?a=text'
)