this.href vs $(this).attr('href')

After reading this article 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 and $(this).attr('href') will return only tab-04.

You can see an example here

$(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?


Doug you are right on the money with




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:


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





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


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.