How to get href value using jQuery?
JavascriptJqueryJavascript Problem Overview
I'm trying to get href value using jQuery:
<html>
<head>
<title>Jquery Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
alert("As you can see, the link no longer took you to jquery.com");
var href = $('a').attr('href');
alert(href);
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
But it doesn't work. Why?
Javascript Solutions
Solution 1 - Javascript
You need
var href = $(this).attr('href');
Inside a jQuery click handler, the this object refers to the element clicked, whereas in your case you're always getting the href for the first <a> on the page. This, incidentally, is why your example works but your real code doesn't
Solution 2 - Javascript
You can get current href value by this code:
$(this).attr("href");
To get href value by ID http://www.url.com"></a>
$("#mylink").attr("href");
Solution 3 - Javascript
It's worth mentioning that
$('a').attr('href'); // gets the actual value
$('a').prop('href'); // gets the full URL always
Solution 4 - Javascript
It works... Tested in IE8 (don't forget to allow javascript to run if you're testing the file from your computer) and chrome.
Solution 5 - Javascript
if the page have one <a> It Works，but，many <a> ,have to use var href = $(this).attr('href');
Solution 6 - Javascript
**Replacing href attribut value to other**
<div class="cpt">
<a href="/ref/ref/testone.html">testoneLink</a>
</div>
<div class="test" >
<a href="/ref/ref/testtwo.html">testtwoLInk</a>
</div>
<!--Remove first default Link from href attribut -->
<script>
Remove first default Link from href attribut
$(".cpt a").removeAttr("href");
Add Link to same href attribut
var testurl= $(".test").find("a").attr("href");
$(".test a").attr('href', testurl);
</script>
Solution 7 - Javascript
If your html link is like this:
<a class ="linkClass" href="https://stackoverflow.com/"> Stack Overflow</a>
Then you can access the href in jquery as given below (there is no need to use "a" in href for this)
$(".linkClass").on("click",accesshref);
function accesshref()
{
var url = $(".linkClass").attr("href");
//OR
var url = $(this).attr("href");
}
Solution 8 - Javascript
Assuming you have this html :
<a class ="linkClass" href="https://stackoverflow.com/"> Stack Overflow</a>
You can get and display the href attribute with this JS snippet :
<script>
$(".linkClass").click(function() {
alert($(this).attr("href"));
});
</script>