如何在jQuery中更新（追加到）href？

Question

我有一组链接，它们都指向Google Maps API。

这些链接已经静态地包含了daddr（目的地）参数。我使用地理位置信息来找到用户的位置，并且在获取数据后想要添加saddr（起始地址）到这些链接中。

所以基本上，我需要在所有指向Google Maps的链接的末尾添加类似于&saddr=50.1234567,-50.03452的内容。

所有的链接都有一个名为directions-link的类。

并且从此页面我已经找到了如何更改它们的方法：

$("a.directions-link").attr("href", "http://www.google.com/");

然而我只想将我的值添加到 href 的末尾，而不改变 href 已有的内容。

我该如何做到这一点？

- JD Isaacks

Answer 1

var _href = $("a.directions-link").attr("href");
$("a.directions-link").attr("href", _href + '&saddr=50.1234567,-50.03452');

使用 each() 进行循环

$("a.directions-link").each(function() {
   var $this = $(this);       
   var _href = $this.attr("href"); 
   $this.attr("href", _href + '&saddr=50.1234567,-50.03452');
});

- Gabe

---

谢谢，如果有多个具有不同href的directions-link，这个代码还能正常工作吗？谢谢！ - JD Isaacks

如果你要为每个 a.directions-link 实例附加相同的内容，那么是的。否则，如果你要为每个 href 附加不同的值，你需要使用 each() 迭代并附加相应的值。 - Gabe

我正在追加相同的值，但每个href最开始都是不同的。 因此，如果第一个是one.html，第二个是two.html，它们最终都变成了one.html＆saddr ...因为它仅捕获第一个a.directions-link的href并将其用于所有链接。 因此，我认为我需要使用each()。 您能详细解释一下如何使用它吗？ 谢谢！ - JD Isaacks

是的，循环就是我需要的，谢谢！ :) - JD Isaacks

Answer 2

jQuery 1.4有一个新功能可以实现这个目的，而且非常好用。我忘记它叫什么名字了，但是你可以像这样使用它：

$("a.directions-link").attr("href", function(i, href) {
  return href + '?q=testing';
});

这个循环也遍历了所有的元素，所以不需要使用$.each。

- zaius

---

那对我没用，但.attr('href', function(i) { return $(this).attr('href') + '?q=testing'; })行得通。 - Elbert Alias

对我来说有效。你是否使用了大于等于1.4版本的jQuery？并且是否将href变量作为第二个参数包含在内？ - zaius

$("#calculator").attr("href", function (i, href) { return href + '?ves=' + 23 + '&v='+ 'sdfds'; }); 不起作用。 - des1roer

在 https://jsfiddle.net/qz9eLr2z/ 进行测试，它可以正常工作。http://api.jquery.com/attr/#attr-attributeName-function 表明此功能是在 jQuery 1.1 中添加的。 - Jacob C.

@JacobC。允许attr接受一个函数是在1.1版中添加的，但将当前值作为第二个参数传递是在1.4版中添加的。这里有一个jquery 1.3版本无法工作的例子https://jsfiddle.net/qz9eLr2z/1/。 - zaius

@zaius 谢谢，你说得很对。对此我感到抱歉。文档中真的应该加上一条注释；目前的文档有误导性。 - Jacob C.

Answer 3

$("a.directions-link").attr("href", $("a.directions-link").attr("href")+"...your additions...");

- Diodeus - James MacFarlane

---

这是错误的。它将第一个匹配的“.directions-link”的href应用于该类别的所有链接。https://jsfiddle.net/yuezewaw/ - Jacob C.

Answer 4

这是我尝试的方法，用于在URL中添加包含特定字符的参数。

jQuery('a[href*="google.com"]').attr('href', function(i,href) {
        //jquery date addition
        var requiredDate = new Date();
        var numberOfDaysToAdd = 60;
        requiredDate.setDate(requiredDate.getDate() + numberOfDaysToAdd); 
        //var convertedDate  = requiredDate.format('d-M-Y');
        //var newDate = datepicker.formatDate('yy/mm/dd', requiredDate );
        //console.log(requiredDate);

        var month   = requiredDate.getMonth()+1;
        var day     = requiredDate.getDate();

        var output = requiredDate.getFullYear() + '/' + ((''+month).length<2 ? '0' : '') + month + '/' + ((''+day).length<2 ? '0' : '') + day;
        //

工作示例点击

- Bikram Shrestha

---

这篇文章的目的是什么？这是一个问题还是一个答案？还是只是一个奇怪的评论？如果是后者，那么你发错地方了。;-) - Phill Healey

我已经在 jsfiddle 中创建了演示样本，但链接错误。现在它指向正确的 URL。 - Bikram Shrestha

你的“答案”毫无意义，实际上更像是一个奇怪的陈述。 - Phill Healey