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">
<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.