Using jquery to change hyperlinks

Question

I'm trying to make a tracking system and am a bit of jquery noob.

Pretend I have this

<div class="ads">
<a href="http://www.google.com">Google</a>
<a href="http://www.stackoverflow.com">Stack Overflow</a>
</div>

I want to replace the urls with my own, that first go to some page to track the click, such as

http://www.mysite.com/TrackClick/?url=http://www.google.com

http://www.mysite.com/TrackClick/?url=http://www.stackoverflow.com

Obviously with the proper encoding.

I thought I could do something like..

$(".ads").find("a").attr("href", "http://www.mysite.com/TrackClick/?" + $(this).attr("href") );

but that doesn't work...and I'm not really sure why

Thanks for any help.

Be aware that users without JavaScript enabled won't be tracked but I am guessing you have already thought about this :) — Phil
– Phil, Commented Aug 2, 2011 at 11:20

Dr.Molle · Accepted Answer · 2011-08-02 11:23:18Z

2

this is not pointing to the link inside your code.

You may use a function to set the attribute:

$(".ads")
.find("a")
 .attr("href", function(i,a)
               {return "http://www.mysite.com/TrackClick/?"+encodeURIComponent(a)} );

answered Aug 2, 2011 at 11:23

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

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

Comments

Madara's Ghost · Accepted Answer · 2011-08-02 11:20:12Z

0

try this:

$(".ads a").each(function() {
    $(this).attr("href", "http://www.mysite.com/TrackClick/?" + $(this).attr("href"));
});

You need to loop through the selection to change attributes relative to themselves, the .each method does that :)

answered Aug 2, 2011 at 11:20

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

Comments

MacMac · Accepted Answer · 2011-08-02 11:20:44Z

0

My working code:

http://jsfiddle.net/ZAhkK/

$('.ads a').each(function(){
   $(this).attr('href', 'http://www.mysite.com/TrackClick/?' + $(this).attr('href'));
});

answered Aug 2, 2011 at 11:20

MacMac

35.5k55 gold badges153 silver badges224 bronze badges

2 Comments

Madara's Ghost Over a year ago

That's not the same code he posted, you should state that this is a fix :P P.S. beat you by 30 seconds :D

MacMac Over a year ago

Lol, yeah was meant to change it, but yes you did :O

Talha Ahmed Khan · Accepted Answer · 2011-08-02 11:24:48Z

0

The reason is that the this is not deffined inside the attr() function.

Use .each() function instead.

$(".ads a").each(function(){
    $(this).attr( 'href', 'http://www.mysite.com/TrackClick/?' + $(this).attr('href') );
});

Take a look at

http://jsfiddle.net/H34yX/1/

answered Aug 2, 2011 at 11:24

Talha Ahmed Khan

15.6k10 gold badges46 silver badges49 bronze badges

Collectives™ on Stack Overflow

Using jquery to change hyperlinks

4 Answers 4

Comments

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Related