79

I have a list of links that all go to a google maps api.

the links already have the daddr (destination) parameter in them as static. I am using Geo-Location to find the users position and I want to add the saddr (source address) to the links once I get the data.

so basically I will need to add something like &saddr=50.1234567,-50.03452 at the tail end of all the links pointing to google maps

All the links have a class called directions-link

and from this page I have figured out how to change them:

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

However I only want to append my value to the end of the href without changing what the href already is.

How can I do that?

Arslan Ali
  • 16,294
  • 7
  • 51
  • 65
JD Isaacks
  • 51,154
  • 89
  • 267
  • 413

4 Answers4

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

To loop with each()

$("a.directions-link").each(function() {
   var $this = $(this);       
   var _href = $this.attr("href"); 
   $this.attr("href", _href + '&saddr=50.1234567,-50.03452');
});
Gabe
  • 46,932
  • 26
  • 137
  • 178
  • Thank you, will this work if there is more than 1 directions-link all with different hrefs? Thank you! – JD Isaacks May 10 '10 at 19:23
  • If you are appending the same thing for each instance of `a.directions-link` then yes. Otherwise, if you are appending a different value to each href, you will need to use an `each()` to iterate and append the respective value. – Gabe May 10 '10 at 19:32
  • I am appending the same value, but each href is different to begin with. so if the first is one.html and the second is two.html they both end up being one.html&saddr... because its capturing only the href of the first a.directions-link and using that for all. So I think I need to use each(). Do you care to eleborate on the use of that? Thanks!! – JD Isaacks May 10 '10 at 19:43
  • Yep, the loop is what I needed, Thanks! :) – JD Isaacks May 10 '10 at 19:53
42

jQuery 1.4 has a new feature for doing this, and it rules. I've forgotten what it's called, but you use it like this:

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

That loops over all the elements too, so no need for $.each

zaius
  • 6,029
  • 4
  • 26
  • 49
  • 4
    That didn't work for me but `.attr('href', function(i) { return $(this).attr('href') + '?q=testing'; })` did. – Elbert Alias Mar 24 '11 at 03:12
  • 3
    @elfbertf it works for me. Are you using jquery >= 1.4? And did you include the href variable as the second argument? – zaius Apr 07 '11 at 03:01
  • $("#calculator").attr("href", function (i, href) { return href + '?ves=' + 23 + '&v='+ 'sdfds'; }); not work – des1roer Aug 09 '16 at 05:26
  • Testing this at https://jsfiddle.net/qz9eLr2z/ , it works. http://api.jquery.com/attr/#attr-attributeName-function says this was added in jQuery 1.1. – Jacob C. Sep 21 '17 at 21:54
  • 1
    @JacobC. Allowing attr to take a function was added in 1.1, but passing the current value as the second param was added in 1.4. Here's an example of it not working in jquery 1.3 https://jsfiddle.net/qz9eLr2z/1/ – zaius Sep 26 '17 at 15:59
  • @zaius Thanks, you're quite right. Sorry about that. They really should put a note saying that in the documentation; as it stands right now, the documentation is misleading. – Jacob C. Sep 26 '17 at 19:25
3
$("a.directions-link").attr("href", $("a.directions-link").attr("href")+"...your additions...");
Diodeus - James MacFarlane
  • 107,156
  • 31
  • 147
  • 171
  • 1
    This is wrong. It applies the href from the first matched ".directions-link" to all links of that class. https://jsfiddle.net/yuezewaw/ – Jacob C. Sep 21 '17 at 21:48
-1

Here is what i tried to do to add parameter in the url which contain the specific character in the 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;
        //

Working Example Click

sagar43
  • 2,734
  • 2
  • 22
  • 45
Bikram Shrestha
  • 1,764
  • 22
  • 22