How to get anchor text/href on click using jQuery?
Consider I have an 开发者_JS百科anchor which looks like this
<div class="res">
<a href="~/Resumes/Resumes1271354404687.docx">
~/Resumes/Resumes1271354404687.docx
</a>
</div>
NOTE: There won't be any id or class for the anchor...
I want to get either href/text in the jQuery onclick
of that anchor.
Note: Apply the class info_link
to any link you want to get the info from.
<a class="info_link" href="~/Resumes/Resumes1271354404687.docx">
~/Resumes/Resumes1271354404687.docx
</a>
For href:
$(function(){
$('.info_link').click(function(){
alert($(this).attr('href'));
// or alert($(this).hash();
});
});
For Text:
$(function(){
$('.info_link').click(function(){
alert($(this).text());
});
});
.
Update Based On Question Edit
You can get them like this now:
For href:
$(function(){
$('div.res a').click(function(){
alert($(this).attr('href'));
// or alert($(this).hash();
});
});
For Text:
$(function(){
$('div.res a').click(function(){
alert($(this).text());
});
});
Edited to reflect update to question
$(document).ready(function() {
$(".res a").click(function() {
alert($(this).attr("href"));
});
});
Without jQuery:
You don't need jQuery when it is so simple to do this using pure JavaScript. Here are two options:
Method 1 - Retrieve the exact value of the
href
attribute:Select the element and then use the
.getAttribute()
method.This method does not return the full URL, instead it retrieves the exact value of the
href
attribute.var anchor = document.querySelector('a'), url = anchor.getAttribute('href'); alert(url);
<a href="/relative/path.html"></a>
Method 2 - Retrieve the full URL path:
Select the element and then simply access the
href
property.This method returns the full URL path.
In this case:
http://stacksnippets.net/relative/path.html
.var anchor = document.querySelector('a'), url = anchor.href; alert(url);
<a href="/relative/path.html"></a>
As your title implies, you want to get the href
value on click. Simply select an element, add a click event listener and then return the href
value using either of the aforementioned methods.
var anchor = document.querySelector('a'),
button = document.getElementById('getURL'),
url = anchor.href;
button.addEventListener('click', function (e) {
alert(url);
});
<button id="getURL">Click me!</button>
<a href="/relative/path.html"></a>
Updated code
$('a','div.res').click(function(){
var currentAnchor = $(this);
alert(currentAnchor.text());
alert(currentAnchor.attr('href'));
});
Alternative
Using the example from Sarfraz above.
<div class="res">
<a class="info_link" href="~/Resumes/Resumes1271354404687.docx">
~/Resumes/Resumes1271354404687.docx
</a>
</div>
For href:
$(function(){
$('.res').on('click', '.info_link', function(){
alert($(this)[0].href);
});
});
精彩评论