[Solved-5 Solutions] Change the href for a hyperlink using jQuery - javascript Tutorial
Problem:
How to change the href for a hyperlink using jQuery ?
Solution 1:
$("a").attr("href", "http://www.wikitechy.com/")
The above code will modify the href of all hyperlinks to point to Wikitechy. For instance, if you have a mix of link source (hyperlink) and link target ("anchor") anchor tags:
<a name="MyLinks"></a>
<a href="http://www.wikitechy.com/">wikitechy</a>
Then you probably don't want to accidentally add href attributes to them. Here, we can specify that our selector will only match <a> tags with an existing href attribute:
$("a[href]") //...
If you need to match an anchor tag with a specific existing href attribute, you can use something like this:
$("a[href='http://www.wikitechy.com/']").attr('href', 'http://www.live.com/')
This will find links where the href exactly matches the string http://www.wikitechy.com/. A more involved task might be matching, then updating only part of the href:
$("a[href^='http://wikitechy.com']")
.each(function()
{
this.href = this.href.replace(/^http:\/\/beta\.wikitechy\.com/,
"http://wikitechy.com");
});
Solution 2:
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 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/');
Solution 3:
Methods without jQuery:
- To change the href value of all <a> elements, select them all and then iterate through the nodelist : (example)
- To change the href value of all <a> elements that actually have an hrefattribute select them by adding the [href] attribute selector (a[href]): (example)
- To change the href value of <a> elements that contain a specific value, for instance google.com, use the attribute selector a[href*="google.com"]: (example)
- Similarly, we can also use the other attribute selectors. For instance:
- a[href$=".png"] could be used to select <a> elements whose href value ends with .png.
- a[href^="https://"] could be used to select <a> elements with href values that are prefixed with https://.
- If we want to change the href value of <a> elements that satisfy multiple conditions: (example)
var anchors = document.querySelectorAll('a');
Array.prototype.forEach.call(anchors, function (element, index) {
element.href = "http://wikitechy.com";
});var anchors = document.querySelectorAll('a[href]');
Array.prototype.forEach.call(anchors, function (element, index) {
element.href = "http://wikitechy.com";
});var anchors = document.querySelectorAll('a[href*="google.com"]');
Array.prototype.forEach.call(anchors, function (element, index) {
element.href = "http://wikitechy.com";
});var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
Array.prototype.forEach.call(anchors, function (element, index)
{
element.href = "http://wikitechy.com";
});Solution 4:
This code 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;
});
Solution 5:
$("a[href^='http://wikitechy.com']")
.each(function()
{
this.href = this.href.replace(/^http:\/\/beta\.wikitechy\.com/,
"http://wikitechy.com");
});