How to apply to all href attr using jQuery

Question

How i do apply attr to all href's on my page. For example: I have :

<ul>
    <li><a href="mylink1">mytext1</a></li>
    <li><a href="mylink2">mytext2</a></li>
    <li><a href="mylink3">mytext3</a></li>
</ul>

I need:

<ul>
    <li><a href="javascript:myFunc(mylink1)">mytext1</a></li>
    <li><a href="javascript:myFunc(mylink2)">mytext2</a></li>
    <li><a href="javascript:myFunc(mylink3)">mytext3</a></li>
</ul>

I need do this without adding new id's, classes and etc. Use Js and jQuery. Please, help! :)

p.s.w.g · Answer 1 · 2013-12-20T13:25:00.100

3

Something like this should work:

$("ul li a").each(function(i, a) {
    a = $(a);
    a.attr('href', 'javascript:myFunc("' + a.attr('href') + '")');
});

Demonstration

Note: this will apply this to only links within ul lists. To apply to all a tags across the entire page, use $("a")... instead.

Also, this method may fail if the href attributes contain certain characters like " or \. If this is a possibility, then this is a bit safer:

$("ul li a").each(function(i, a) {
    a = $(a);
    a.attr('href', 'javascript:myFunc(' + JSON.stringify(a.attr('href')) + ')');
});

edited Dec 20 '13 at 13:25

answered Dec 20 '13 at 13:15

p.s.w.g

146,324
30
291
331

Probably we do not need ul li in the selector because this may be just an example and other links may not be inside li. – AbhinavRanjan Dec 20 '13 at 13:18
@AbhinavRanjan That's a good point, I've included a note about that in my answer. – p.s.w.g Dec 20 '13 at 13:20
It is better now. :-) – AbhinavRanjan Dec 20 '13 at 13:21

Praveen · Answer 2 · 2013-12-20T13:29:06.453

1

You can try like

$('a').each(function () {
    var att = $(this).attr('href');
    $(this).attr("href", "javascript:myFunc(" + att + ")");
});

edited Dec 20 '13 at 13:29

answered Dec 20 '13 at 13:14

Praveen

55,303
33
133
164

This will add javascript:myFunc(mylink1) every where which is wrong. – AbhinavRanjan Dec 20 '13 at 13:16
2

That applies the same href to all links, not what the OP indicated he wants. – Mister Epic Dec 20 '13 at 13:16
Thanks @chris, I have corrected. First I tried to show a sample :) – Praveen Dec 20 '13 at 13:20
You need to wrap the attribute value in quotes so it will be passed as a string literal. – p.s.w.g Dec 20 '13 at 13:27

Jonas Grumann · Answer 3 · 2013-12-20T14:09:06.577

1

Using jQuery:

$("a[href^='mylink']").on('click', function(e) {
    e.preventDefault();
   myFunc($(this).attr("href"));
});

edited Dec 20 '13 at 14:09

answered Dec 20 '13 at 13:15

Jonas Grumann

10,438
2
22
40

1

This should include `e.preventDefault()` to prevent the link from actually navigating. – Kevin Bowersox Dec 20 '13 at 13:19
I believe `e.preventDefault()` is meant to be the first statement executed in an event handler. See: http://stackoverflow.com/a/4771084/714969 – Kevin Bowersox Dec 20 '13 at 13:23
1

It won't work [jsfiddle](http://jsfiddle.net/6CpTL/1/), you missed to add `"` in `.attr(href)` – Praveen Dec 20 '13 at 13:26

score 1 · Answer 4 · answered Dec 20 '13 at 13:16

1

this shoud do what you need:

$("a").each( function() {
  var url = $(this).attr('href');
  $(this).attr('href', 'javascript:myFunc("'+url+'")');
});

answered Dec 20 '13 at 13:16

webdev-dan

1,339
7
10

score 1 · Answer 5 · answered Dec 20 '13 at 13:16

1

Instead of modifying the href assign the event handler in the actual Javascript:

$("[href]").click(function(e){
    e.preventDefault();
    myFunc(this.href);
});

function myFunc(value){
   alert(value);
}

JS Fiddle: http://jsfiddle.net/Rs9RH/

answered Dec 20 '13 at 13:16

Kevin Bowersox

93,289
19
159
189

score 0 · Answer 6 · answered Dec 20 '13 at 13:16

0

Try This:

$('li a').each(function(){
$(this).attr('href',"javascript:myFunc("+$(this).attr('href')+")");
})

WORKING FIDDLE

answered Dec 20 '13 at 13:16

Milind Anantwar

81,290
25
94
125

You need to wrap the attribute value in quotes so it will be passed as a string literal. Your fiddle throws errors. – p.s.w.g Dec 20 '13 at 13:28
Try clicking on any of the links – p.s.w.g Dec 20 '13 at 13:59

Donnie Rock · Answer 7 · 2013-12-20T13:42:45.760

0

I think this could works:

$("a[href^='mylink']").each(function () {
  var url = $(this).attr('href');
  $(this).attr("href", 'javascript:myFunc("'+url+'")')
})

edited Dec 20 '13 at 13:42

answered Dec 20 '13 at 13:20

Donnie Rock

552
1
14
27

You need to wrap the attribute value in quotes so it will be passed as a string literal. – p.s.w.g Dec 20 '13 at 13:29

How to apply to all href attr using jQuery

7 Answers7