14

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

32

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';
}
8
  • @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 : jsperf.com/each-vs-function Jul 19, 2013 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?) Jul 19, 2013 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 Jul 19, 2013 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)? Jul 19, 2013 at 14:13
  • @Karl-AndréGagnon Probably something to do with this (source code) Jul 19, 2013 at 16:14
14

.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';
});
3
  • @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? Jul 22, 2013 at 6:23
  • "return str.split('?')[0];" should do it. Jul 22, 2013 at 10:59
  • @Blazemonger Thanks , :) Jul 22, 2013 at 13:03
6
$('#pager a').each(function() {
   $(this).attr('href', $(this).attr('href') + '?a=text');
});
1
  • Thanks, Updated the question Jul 22, 2013 at 6:27
5

Simply use the attr property. Example :-

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

This will do the job.

3
$("#pager").find("a").each(function(){
var $this=$(this);
$this.attr("href",$this.attr("href")+"?a=text");
})
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');
2

Try this code :

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.