CODEWITHSUNDEEP
javascriptjquery
Adi Sembiring
Adi Sembiring

Reputation: 5936

How to get href value using jQuery?

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?

Upvotes: 218

Views: 626265

Answers (8)

amd i
amd i

Reputation: 51

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>

Upvotes: 5

Soumya Rajiv
Soumya Rajiv

Reputation: 127

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");
}

Upvotes: 0

Hikmat Ullah Khan
Hikmat Ullah Khan

Reputation: 1

**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>

Upvotes: 0

Jahanggir Jaman
Jahanggir Jaman

Reputation: 331

It's worth mentioning that

$('a').attr('href'); // gets the actual value
$('a').prop('href'); // gets the full URL always

Upvotes: 23

Prince Patel
Prince Patel

Reputation: 3060

You can get current href value by this code:

$(this).attr("href");

To get href value by ID 

$("#mylink").attr("href");

Upvotes: 18

wangtong
wangtong

Reputation: 31

if the page have one <a> It Works，but，many <a> ,have to use var href = $(this).attr('href');

Upvotes: 2

Gareth
Gareth

Reputation: 138042

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

Upvotes: 447

AlfaTeK
AlfaTeK

Reputation: 7765

It works... Tested in IE8 (don't forget to allow javascript to run if you're testing the file from your computer) and chrome.

Upvotes: 2

Related Questions