[javascript] How to change the href for a hyperlink using jQuery



4 Answers

With jQuery 1.6 and above you should use:

$("a").prop("href", "http://www.jakcms.com")

The difference between prop and attr is that attr grabs the HTML attribute where as prop grabs the DOM property.

You can find more details in this post: .prop() vs .attr()

Question

How can you change the href for a hyperlink using jQuery?




This snippet invokes when a link of class 'menu_link' is clicked, and shows the text and url of the link. The return false prevents the link from being followed.

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});



Depending on whether you want to change all the identical links to something else or you want control over just the ones in a given section of the page or each one individually, you could do one of these.

Change all links to Google so they point to Google Maps:

<a href="http://www.google.com">

$("a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

To change links in a given section, add the container div's class to the selector. This example will change the Google link in the content, but not in the footer:

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$(".content a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

To change individual links regardless of where they fall in the document, add an id to the link and then add that id to the selector. This example will change the second Google link in the content, but not the first one or the one in the footer:

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
    <p>...second link to <a href="http://www.google.com/" 
        id="changeme">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$("a#changeme").attr('href', 
'http://maps.google.com/');



The simple way to do so is :

Attr function (since jQuery version 1.0)

$("a").attr("href", "https://.com/") 

or

Prop function (since jQuery version 1.6)

$("a").prop("href", "https://.com/")

Also, the advantage of above way is that if selector selects a single anchor, it will update that anchor only and if selector returns a group of anchor, it will update the specific group through one statement only.

Now, there are lot of ways to identify exact anchor or group of anchors:

Quite Simple Ones:

  1. Select anchor through tag name : $("a")
  2. Select anchor through index: $("a:eq(0)")
  3. Select anchor for specific classes (as in this class only anchors with class active) : $("a.active")
  4. Selecting anchors with specific ID (here in example profileLink ID) : $("a#proileLink")
  5. Selecting first anchor href: $("a:first")

More useful ones:

  1. Selecting all elements with href attribute : $("[href]")
  2. Selecting all anchors with specific href: $("a[href='www..com']")
  3. Selecting all anchors not having specific href: $("a[href!='www..com']")
  4. Selecting all anchors with href containing specific URL: $("a[href*='www..com']")
  5. Selecting all anchors with href starting with specific URL: $("a[href^='www..com']")
  6. Selecting all anchors with href ending with specific URL: $("a[href$='www..com']")

Now, if you want to amend specific URLs, you can do that as:

For instance if you want to add proxy website for all the URLs going to google.com, you can implement it as follows:

$("a[href^='http://www.google.com']")
   .each(function()
   { 
      this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) {
        return "http://proxywebsite.com/?query="+encodeURIComponent(x);
    });
   });



 $("a[href^='http://.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.\.com/, 
         "http://.com");
   });



Related