how to append string to
Asked Jul 19 '13 at 13:01

Active Jul 22 '13 at 06:27

Viewed 5.0k times

Question

I've the elements as follows,

<div id="pager">
<a href="/somepath/1">First</a>
<a href="/somepath/1">Previous</a>
<a class="" href="/somepath/1">1</a>
<a class="Current" href="/somepath/2">2</a>
<a class="" href="/somepath/3">3</a>
<a href="/somepath/3">Next</a>
<a href="/somepath/20">Last</a>
</div>

and I want it to be changed as follows within browser.

<div id="pager">
<a href="/somepath/1?a=text">First</a>
<a href="/somepath/1?a=text">Previous</a>
<a class="" href="/somepath/1?a=text">1</a>
<a class="Current" href="/somepath/2?a=text">2</a>
<a class="" href="/somepath/3?a=text">3</a>
<a href="/somepath/3?a=text">Next</a>
<a href="/somepath/20?a=text">Last</a>
</div>

So that I can use the "a" data values to next page. Can any one give me the code, which does the appends inside

div id="pager" -> <a> -> href="

and i wants to remove the added text with another onChange event.

Thanks in advance

Karl-André Gagnon · Accepted Answer · 2013-07-19T13:32:49.273

34

Since jquery is tagged :

$('#pager a').each(function(){
     this.href += '?a=text';
})

Vanilla JS would look like this :

var a = document.getElementById('pager').getElementsByTagName('a'),
    length = a.length;

for(var i=0; i< length; i++){
    a[i].href += '?a=text';
}

edited Jul 19 '13 at 13:32

answered Jul 19 '13 at 13:04

Karl-André Gagnon

33,662
5
50
75

@Bondye What is wrong with `.each` function? *"+1 Finally one without that .each() function... People don't understand .each().."*. The answer where you posted this comment, what do you think happen behind the code? Alsoo, `.each()` is faster : http://jsperf.com/each-vs-function – Karl-André Gagnon Jul 19 '13 at 13:48
@Karl-AndréGagnon Personally, I prefer to use `.attr()` with a function instead of `.each()` because I find it more readable. But I certainly can't argue with performance testing. (I wonder if some optimization in jQuery could fix that?) – Blazemonger Jul 19 '13 at 14:04
2

@Blazemonger Well that's a personnal preference since i prefer using `.each()`, So we cant arg on that :) @Bondye It is not looping twice, it is actually the same result as using a function (like Blaze's answer). Here the revelant part in jquery code : `for ( ; i < length; i++ ) { fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) ); }. The only adding to the `.each` way is an additionnal function call (wich is why each is faster). I think your comment is more revelant for function like `.addClass()` wich is useless to loop through elements & call it after – Karl-André Gagnon Jul 19 '13 at 14:09
@Blazemonger on a side note, the vanilla js is the slowest one. Any idea why (i probably did something wrong in the code)? – Karl-André Gagnon Jul 19 '13 at 14:13
@Karl-AndréGagnon Probably something to do with [this (source code)](https://github.com/jquery/jquery/blob/master/src/core.js#L566) – Blazemonger Jul 19 '13 at 16:14
@Karl-AndréGagnon, how to remove the added text "?a=text" with the another onChange event? – user9371102 Jul 22 '13 at 06:21
@Vicky you can try `this.href = this.href.replace('?a=text', '');` – Karl-André Gagnon Jul 22 '13 at 12:34

Blazemonger · Answer 2 · 2013-07-19T14:06:20.107

15

.attr(), like many jQuery functions, can take a function argument that modifies the existing value:

$('#pager a').attr('href',function(i,str) {
   return str + '?a=text';
});

edited Jul 19 '13 at 14:06

answered Jul 19 '13 at 13:05

Blazemonger

90,923
26
142
180

@Blazemonger Thanks and I'll accept Karl-André Gagnon's answer. You have wow ans and how to remove the added text "?a=text" with the another onChange event? – user9371102 Jul 22 '13 at 06:23
"return str.split('?')[0];" should do it. – Blazemonger Jul 22 '13 at 10:59

score 6 · Answer 3 · answered Jul 19 '13 at 13:04

6

$('#pager a').each(function() {
   $(this).attr('href', $(this).attr('href') + '?a=text');
});

answered Jul 19 '13 at 13:04

Barış Uşaklı

13,440
7
40
66

score 5 · Answer 4 · answered Jul 19 '13 at 13:04

5

Simply use the attr property. Example :-

$("a").attr("href", "http://www.google.com/")

This will do the job.

answered Jul 19 '13 at 13:04

Aamir Shah

4,473
8
21
28

score 3 · Answer 5 · answered Jul 19 '13 at 13:05

3

$("#pager").find("a").each(function(){
var $this=$(this);
$this.attr("href",$this.attr("href")+"?a=text");
})

answered Jul 19 '13 at 13:05

vikrant singh

2,091
1
12
16

score 2 · Answer 6 · answered Jul 19 '13 at 13:04

2

you can use attr method

$('a').attr('href', '/somepath/1?a=text');

And if you want to change the href of a specific <a> give that '' a unique id and than change its href as follows

$('#link').attr('href', '/somepath/1?a=text');

answered Jul 19 '13 at 13:04

Khawer Zeshan

9,470
6
40
63

score 2 · Answer 7 · answered Jul 19 '13 at 13:05

2

Try this code :

$('#pager a').each(function(){
    this.href += '?a=text'
})

answered Jul 19 '13 at 13:05

Lucas Willems

6,673
4
28
45

how to append string to Asked Jul 19 '13 at 13:01 Active Jul 22 '13 at 06:27 Viewed 5.0k times

7 Answers7

how to append string to
Asked Jul 19 '13 at 13:01

Active Jul 22 '13 at 06:27

Viewed 5.0k times