33

After reading this article net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/ I came to conclusion that using this.href is more efficient.

However, when I tried to use it on one of my projects, I saw that this.href returns not only href but also appends a url of a website. For example <a href="tab-04"></a>this.href will return http://example.com/abc/tab-04 and $(this).attr('href') will return only tab-04.

You can see an example here http://jsfiddle.net/UC2xA/1/.

$(this).attr('href') however returns exactly what I need and nothing more.

My question is this, how can I rewrite (or do what is necessary) this.href so that it would only return tab-04?

EDIT

Doug you are right on the money with 

this.getAttribute('href')
user
  • 2,939
  • 5
  • 26
  • 39
  • 4
    If you want the exact value of the `href` attribute (the one that is hard-coded into the HTML source code), then use `$(this).attr('href')`. if you want the fully qualified URL, use `this.href`. – Šime Vidas Aug 08 '11 at 01:39
  • If you are gonna use this.href because of its efficiency and then rewrite it to have it 'do more'; it kinds defeats the purpose. – Joey Aug 08 '11 at 01:51
  • -1 for "I came to conclusion that using this.href is more efficient." No, not really, but you are certainly [optimizing too early](http://en.wikipedia.org/wiki/Program_optimization#When_to_optimize). The odds that purported change in efficiency, if it even exists, would be detectable are near nil. – Michael Lorton Aug 08 '11 at 02:56
  • 4
    @Malvolio - direct access to DOM properties is hugely faster than using jQuery's methods. When compared with creating a jQuery object first, it's orders of magnitude faster. Saying it is not detectable or nil is rubbish. – RobG Aug 08 '11 at 03:10
  • @RobG -- you can call thing "rubbish" if you're so inclined but if you think the user will be able to detect the difference between a 10 ns access and a 1000 ns access, well, you're going to have to prove it. – Michael Lorton Aug 08 '11 at 03:19
  • 3
    @Malvlio - the user won't see the difference for a trival application, but they will for larger applications. It's also just bad style to use inefficient code when very much more efficient code is simpler to write (particularly when one of the claims of jQuery is to "write less"). – RobG Aug 08 '11 at 05:34
  • @Malvolio looking back at this question, I wasn't really trying to optimize, I was trying to find out how to do it with JavaScript as opposed to jQuery. – user Jun 22 '12 at 02:09

3 Answers3

54

The href property in plain Javascript will have the semantic attached to it. It returns the destination URL which the link will lead to. It doesn't matter how it was written (absolute or relative URLs).

When you use the $(this).attr("href") you are retrieving directly the value of href attribute just like any other attribute, so it will return the exact value rendered in the HTML.

For your case then, it's better to use $(this).attr("href")

If you don't want to use jQuery, there's yet another solution, using just plain JavaScript:

this.getAttribute('href')
Darryl Hein
  • 142,451
  • 95
  • 218
  • 261
Doug
  • 6,322
  • 3
  • 29
  • 48
0

document.getElementById(yourAnchorId).href.split("/")

[document.getElementById(yourAnchorId).href.split("/").length - 1].split("?")[0];

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
Brian
  • 2,772
  • 15
  • 12
  • Hey Brian, I can't get your stuff to work, yet, could you please, provide a link to jsbin or to jsfiddle, so I would see how you've done it? – user Aug 08 '11 at 02:01
0

what a but a little substring?

for example :

function getHref(a)
{
    var i = a.outerHTML.indexOf('href="')+6;
    return a.outerHTML.substring(i, a.outerHTML.indexOf('"', i));

}

P.S TESTED!

ygaradon
  • 2,198
  • 2
  • 21
  • 27
  • Yonathan Garti, could you please, provide a link to jsbin or to jsfiddle, so I would see how you've done it? Because I can't seem to get your stuff to work. Not yet at least. – user Aug 08 '11 at 02:03
  • 2
    outerHTML is not supported by all browsers, the href property is. – RobG Aug 08 '11 at 03:12