How to change href value using jquery after page load?

Question

Below is the html after page load.

<div style="width: 960px;">
<a href="Alerts.htm" target="_blank">TEST 1</a>
<a href="blog.htm" target="_blank">TEST 2</a>
<a href="severe.htm" target="_blank">TEST 3</a>
</div>

I need to change the href value of <a href="blog.htm" target="_blank">TEST 2</a> after page load using jquery.

I've tried the below options. But it didn't work. Any suggestions/ideas plz...

TRY I

$(a).attr("href", "http://the.new.url");

TRY II

$('a[href*="blog.htm"]').attr('href', function(i,href) {
    return href.replace('blog.htm', 'http://catbloguat.myblog.com');
});

Am I missing anything ?

Answer 1

you missed the document ready function.

$(document).ready(function() {

 $('a[href*="blog.htm"]').attr('href' , 'http://catbloguat.myblog.com');

});

Fiddle

Answer 2

what you have should work (TryII)

probably you are not wrapping your code in document ready handler

$(function(){
  $('a[href*="blog.htm"]').attr('href', function(i,href) {
    return href.replace('blog.htm', 'http://catbloguat.myblog.com');
  });
});

Demo -->http://jsfiddle.net/qfQ8W/

Answer 3

You need to wrap in document ready function

$(document).ready(function(){
    $('a[href*="blog.htm"]').attr('href', 'http://catbloguat.myblog.com');   
});

Example : JSFIDDLE