clearing an <a> href after the page is loaded using jquery

Question

I'm trying to slightly modify a wordpress template. At the moment a function returns a link to an article, I am trying to replace this link so that instead of diverting you to another page it just brings the article in and loads it.

To do this I need to reset the anchors href after the page has loaded.

This is the bit of code I am interested in:

<?php the_content( __('<img class="readmore" src="/images/readmore.png" title="poo"></img>', 'twentyten' ) ); ?>

returns:

<a class="more-link" href="http://henryprescott.com/undgraddissintro/#more-12"&gt;
<img title="poo" src="/images/readmore.png" class="readmore"></img></a>

However I want to modify this so a script runs instead of taking you to a new page.

I therefore tried to run this:

$(document).ready(function(){  

  $("a.more-link").css("href", "#");
  alert($("a.more-link").css("href"));
}

It does nothing, and the alert returns "undefined".

Where am I going wrong, thanks!

Answer 1

Use attr() instead of css().

The css method is for getting or setting CSS properties (like margin, color, font-size, etc.). The attr method is for getting or setting HTML attributes, like href, src, etc.

Answer 2

You are trying to change the attribute with a CSS command, which is wrong.

$(document).ready(function(){  
  $("a.more-link").attr("href", "#");
  alert($("a.more-link").attr("href"));
}

Answer 3

the css() if just for adding inline css, try attr() in this case

jQuery(document).ready(function(){  
jQuery("a.more-link").attr("href", "#");
alert(jQuery("a.more-link").attr("href"));
return false;
}

the return false is to avoid the page reload. ;)