JQuery Modification du paramètre d'URL sur l'ancre multiple

Question

Ce que j'essaie de faire et que j'ai principalement fait est de changer le paramètre d'étiquette dans l'URL pour les balises d'ancrage enveloppées dans un intervalle. Cela fonctionne bien. ce qui se passe est qu'il tire la première balise d'ancre href et remplace toutes les balises d'ancrage par la même href. Je pensais que tout en passant par la boucle, il remplacerait le var chaque fois avec le nouveau 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> 

Voici mon code qui ne remplace le paramètre de la balise dans une balise d'ancrage. Cette fonctionnalité fonctionne bien. Mon problème est dans la fonction displayTextNumber(). Il stocke la première balise d'ancrage qu'il trouve et l'utilise pour remplacer toutes les autres balises d'ancrage href sur l'ensemble du site. Je veux parcourir chaque étiquette.

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 

Answer 1

Lorsque itérer en utilisant le code existant:

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

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

la old_fulladdr sera variables toujours la href du premier <a> parce que ce ce que vous définissez avec $('span a').attr('href'). Ce sélecteur demande à jQuery d'obtenir tous les éléments a avec un span ancêtre n'importe où dans la page. Au lieu de cela, vous devez sélectionner <a> sous l'élément NumberSpans[i] à chaque fois. par exemple:

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

De même, lors du réglage du nouveau href, vous avez besoin de le mettre sur la a sous la durée actuelle dans la boucle comme:

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

Notez que $(NumberSpans[i]).find('a') pourrait extraire en tant que variable. Enfin, lorsque vous sélectionnez initialement les éléments span, vous sélectionnez toutes les travées sur l'ensemble du document avec var NumberSpans = document.getElementsByTagName('span'); pour que votre boucle puisse afficher une erreur si une plage de la liste n'est pas celle que vous attendiez.

pas partie de la question, mais quelques conseils ...

Je me rends compte que vous utilisez certaines parties de jQuery, mais la bibliothèque peut également sélectionner et itérer collections d'éléments plus simples, par exemple, au lieu de

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

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

vous pouvez utiliser la fonction .each() jQuery

$('.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); 
}); 

qui pourrait simplifier le code.

Answer 2

Modifier la boucle pour le faire

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

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

//do something to the href 

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


});