Comment changer le href d'un hyperlien en utilisant jQuery ?
Utilisation de
$("a").attr("href", "http://www.google.com/")
modifiera le href de tous les liens hypertextes pour qu'il pointe vers Google. Cependant, vous souhaitez probablement utiliser un sélecteur un peu plus raffiné. Par exemple, si vous disposez d'un mélange de balises d'ancrage source (hyperlien) et cible (alias "anchor") :
<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>
...Alors vous ne voulez probablement pas leur ajouter accidentellement des attributs href
. Par sécurité, nous pouvons donc spécifier que notre sélecteur ne correspondra qu'aux balises <a>
ayant un attribut href
existant :
$("a[href]") //...
Bien sûr, vous avez probablement quelque chose de plus intéressant en tête. Si vous voulez faire correspondre une ancre avec une href
spécifique existante, vous pouvez utiliser quelque chose comme ceci :
$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')
Ceci trouvera les liens où la href
correspond exactement à la chaîne http://www.google.com/
. Une tâche plus complexe pourrait consister à faire correspondre, puis à mettre à jour une partie seulement de la href
:
$("a[href^='http://stackoverflow.com']")
.each(function()
{
this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/,
"http://stackoverflow.com");
});
La première partie sélectionne uniquement les liens dont le href commence par https://stackoverflow.com
. Ensuite, une fonction est définie qui utilise une simple expression régulière pour remplacer cette partie de l'URL par une nouvelle. Notez la flexibilité que cela vous donne - n'importe quelle sorte de modification du lien peut être faite ici.
Selon que vous voulez changer tous les liens identiques en quelque chose d'autre ou que vous voulez contrôler seulement ceux d'une section donnée de la page ou chacun d'eux individuellement, vous pouvez faire l'une de ces choses.
Modifiez tous les liens vers Google pour qu'ils pointent vers Google Maps :
<a href="http://www.google.com">
$("a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');
Pour modifier les liens d'une section donnée, ajoutez la classe de la division conteneur au sélecteur. Cet exemple modifiera le lien Google dans le contenu, mais pas dans le pied de page :
<div class="content">
<p>...link to <a href="http://www.google.com/">Google</a>
in the content...</p>
</div>
<div class="footer">
Links: <a href="http://www.google.com/">Google</a>
</div>
$(".content a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');
Pour modifier des liens individuels indépendamment de leur emplacement dans le document, ajoutez un identifiant au lien, puis ajoutez cet identifiant au sélecteur. Cet exemple modifiera le deuxième lien Google dans le contenu, mais pas le premier ni celui du pied de page :
<div class="content">
<p>...link to <a href="http://www.google.com/">Google</a>
in the content...</p>
<p>...second link to <a href="http://www.google.com/"
id="changeme">Google</a>
in the content...</p>
</div>
<div class="footer">
Links: <a href="http://www.google.com/">Google</a>
</div>
$("a#changeme").attr('href',
'http://maps.google.com/');