JQuery Changing URL Param on Multiple anchor

Question

What I am trying to do and have mostly accomplished is changing the tag parameter in the URL for anchor tags wrapped in a span. That is working fine. what is happening is it pulls the first anchor tag href and and is replacing all the anchor tags with the same href. I thought as it went through the loop it would replace the var each time with the new href. Suggestions?

    <div class="changeparam">
        <span><a href="http://demo.org/post.php?i=17uh23&p=456&s=789&tag=asdf">Link</a></span>
        <span><a href="http://demo.org/post.php?i=18uh23&p=456&s=789&tag=asdf">Link</a></span>
        <span><a href="http://demo.org/post.php?i=19uh23&p=456&s=789&tag=asdf">Link</a></span>
        <span><a href="http://demo.org/post.php?i=20uh23&p=456&s=789&tag=asdf">Link</a> </span>   
        <a href="www.test.com">test</a>
    </div>

Here is my code that does replace the tag parameter in a anchor tag. That functionality is working fine. My issue is in the function displayTextNumber(). It is storing the first anchor tag it finds and using that to replace all the other anchor tags href across the entire site. I want to iterate through each tag.

function replaceQueryString( queryString, keys, newValues ) {
var parts = queryString.split('&');

// We're going to make an array of querystring key=value strings
var new_parts = [];

for( i in parts ) {
    var keyValue = parts[i].split('=');

    // Use jQuery to see if this key is in our desired set
    var replacePos = $.inArray(keyValue[0],keys);

    // If it is, it will give a non-negative integer, if not it'll give -1
    if( replacePos >= 0 )
        // We want to replace this key so make a new string for the key/value pair
        new_parts.push( keyValue[0] + '=' + newValues[replacePos] );
    else {
        // This isn't the key we want to replace, so leave it alone
        new_parts.push( parts[i] );
    }
}

// glue all the parts together and return them
return new_parts.join('&');
}


function displayTextNumber(){

    if(isNotBrandedTerm()){

    var NumberSpans = document.getElementsByTagName('span');

    for (var i=0; i < NumberSpans.length; i++) {
        // Get the full address from the original link
        var old_fulladdr = $('span a').attr('href');
        var old_addr_parts = old_fulladdr.split('?');

        // The keys you want to replace
        var tobereplaced = ['tag'];

        // The respective values you want to assign
        var replacements = [getPhoneNumber()];

        var new_query_string = replaceQueryString( old_addr_parts[1], tobereplaced, replacements );

        //var new_querystring = 'i=abc&p=def&g=ghi';
        $('span a').attr('href',old_addr_parts[0] + '?' + new_query_string);


            }//CLOSE IF
    } //CLOSE FOR
}//close isNotBrandedTerm

andyb · Accepted Answer · 2012-09-21 16:08:06Z

When iterating using the existing code:

var NumberSpans = document.getElementsByTagName('span');

for (var i=0; i < NumberSpans.length; i++) {
    var old_fulladdr = $('span a').attr('href');
}

the variable old_fulladdr will always be the href of the first <a> because that's what you set it to with $('span a').attr('href'). That selector is instructing jQuery to get all a elements with a span ancestor anywhere in the page.

Instead, you should be selecting the <a> under the element NumberSpans[i] each time. for example:

var old_fulladdr = $(NumberSpans[i]).find('a').attr('href');

Similarly, when setting the new href, you need to set it on the a under the current span in the loop like:

$(NumberSpans[i]).find('a').attr('href',old_addr_parts[0] + '?' + new_query_string);

Note that $(NumberSpans[i]).find('a') could be extracted as a variable.

Lastly, when you are selecting the span elements initially, you are selecting all the spans across the entire document with var NumberSpans = document.getElementsByTagName('span'); so your loop may error if a span in the list is not one you are expecting.

Not part of the question but some advice...

I realise that you are using some parts of jQuery but the library can also make selecting and iterating collections of elements simpler for example, instead of

var NumberSpans = document.getElementsByTagName('span');

for (var i=0; i < NumberSpans.length; i++) {
    // do things
}

you could use jQuery's .each() function

$('.changeparam a').each(function(k, v) { // select all `a` with ancestor class="changeparam"
    // here k = the index of each element so will be 0, 1, 2, 3, 4
    // and the v will be each element, i.e. the first <a>, second <a>, etc...
    console.log(k, v);
});

which might simplify the code.

First.. thanks for help implementing this.. staring at it for quite some time. Second.. thanks for the suggestions. I am always looking to clean up my code.

CR41G14 · Accepted Answer · 2012-09-21 14:46:17Z

1

Change the loop to do this

$('span a').each(function(k,v){

var href = $(v).attr("href");

//do something to the href

//then re-apply 
$(v).attr("href",theNewString);


});

answered Sep 21, 2012 at 14:46

CR41G14

5,6245 gold badges47 silver badges68 bronze badges

1 Comment

Garrett Over a year ago

I already am accessing the href. It is 'old_fulladdr'. Then I am splitting the address at the '?'.. bare with me.. I'm just not sure how to implement your suggestion into my code.

Collectives™ on Stack Overflow

JQuery Changing URL Param on Multiple anchor

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related