Cannot change href attribute with jQuery

Question

I am accessing links on a webpage with jQuery, with the following code:

$('a[href]').each(function() {
  $(this).attr('class', 'visited');
  $(this).attr('href', '#');
})

The class on the link will be changed, but the href will not. Is there something preventing me from changing/altering the href?

Edit:

I updated the code to the following:

$('a[href]').each(function() {
        $(this).addClass('visited');
        this.href = '#';
        })

However, although it works on MOST websites, it doesn't work on news.yahoo.com. Any reasons why this is so?

This script does work on most websites: However, for example, it doesn't seem to work on news.yahoo.com. I am using the updated code per @PSCoder: this.href ="#" — user2344345
– user2344345, Commented May 2, 2013 at 19:10
are you trying to access news.yahoo.com elements via an iframe ? this is not supposed to work — Frederik.L
– Frederik.L, Commented May 2, 2013 at 19:36
This is not supposed to work, for an even greater reason - news.yahoo.com does NOT use jQuery — Om Shankar
– Om Shankar, Commented May 3, 2013 at 17:42

Michael Geary · Accepted Answer · 2013-05-02 18:35:53Z

3

For the href, you probably want to use .prop() instead of .attr().

For the classname, in most cases you want to use .addClass() instead of overwriting the entire class attribute.

answered May 2, 2013 at 18:35

Michael Geary

29k9 gold badges67 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Blazemonger Over a year ago

Why use .prop()? This isn't something that users normally alter like checked or selected. .attr() is entirely correct to use in this case.

Michael Geary Over a year ago

@Blazemonger - I think you are right - I stand corrected. So would it be accurate to say that either .prop() or .attr() is equally valid for this use? (Actually I like the direct DOM property reference in PSCoder's answer the best.)

Blazemonger Over a year ago

It's possible to change the checked state of a checkbox input without altering the DOM -- you just click on the checkbox. In that case, .prop() is the correct method. However, it's impossible to change the href of an anchor without modifying the DOM directly in some way, so .attr() is the appropriate method.

Om Shankar Over a year ago

Ideally, prop should not be used as you are not changing/toggling a property. You are modifying the class which is an attribute and hence attr()

PSL · Accepted Answer · 2013-05-02 18:57:50Z

3

You don't need to use jquery wrapper over this to do this:- You can just access href as a property from this itself as it represents the dom element.

$('a[href]').each(function() {
 ...
   this.href ="#";
})

edited May 2, 2013 at 18:57

answered May 2, 2013 at 18:37

PSL

124k21 gold badges257 silver badges243 bronze badges

3 Comments

OliverK Over a year ago

But $ itself is jQuery and each a memberfunction of jQuery ;)

Michael Geary Over a year ago

What he means is that you don't need to use jQuery for the line of code that sets the href; the direct DOM reference is as easy or easier to use. Of course you're still using jQuery for other parts of your code.

PSL Over a year ago

@MichaelGeary Thanks for clarifying to OlikerK. I edited my answer to make it more clear. :)

Collectives™ on Stack Overflow

Cannot change href attribute with jQuery

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related