Comment changer le href pour un lien hypertexte à l'aide de jQuery

1267

Comment pouvez-vous changer le href pour un lien hypertexte en utilisant jQuery?

Brian Boatright
la source
12
Pour ceux d'entre vous intéressés par des solutions sans utiliser jQuery - stackoverflow.com/questions/179713/…
Josh Crozier
1
Pour les nouvelles versions de jQuery: stackoverflow.com/a/6348239/4928642
Qwertiy
1
l'exemple le plus simple sans jQuery stackoverflow.com/a/39276418/696535
Pawel
Une liste complète des solutions possibles, des sélecteurs utiles et un moyen d'obtenir la valeur des correspondances de regex et de les utiliser pour mettre à jour href: stackoverflow.com/a/49568546/1262248
Aman Chhabra

Réponses:

1832

En utilisant

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

modifiera le href de tous les hyperliens pour pointer vers Google. Vous voulez probablement un sélecteur un peu plus raffiné. Par exemple, si vous avez un mélange de balises d'ancrage source de lien (hyperlien) et cible de lien (aka "ancre"):

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

... Dans ce cas, vous ne voudrez probablement pas leur ajouter accidentellement des hrefattributs. Pour des raisons de sécurité, nous pouvons spécifier que notre sélecteur ne fera correspondre les <a>balises qu'avec un hrefattribut existant :

$("a[href]") //...

Bien sûr, vous aurez probablement quelque chose de plus intéressant à l'esprit. Si vous souhaitez faire correspondre une ancre avec une existante spécifique href, vous pouvez utiliser quelque chose comme ceci:

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

Cela trouvera des liens où le hrefcorrespond exactement à la chaîne http://www.google.com/. Une tâche plus impliquée peut correspondre, puis mettre à jour uniquement une partie de 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 liens uniquement lorsque le href commence avec http://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 - toute sorte de modification du lien pourrait être effectuée ici.

Shog9
la source
3
"en HTML, les noms d'éléments ne respectent pas la casse, mais en XML ils sont sensibles à la casse." - w3.org/TR/CSS21/selector.html
eyelidlessness
47
Par souci d'exhaustivité, puisque cela est toujours lié à l'occasion, j'ajouterai que depuis jQuery 1.4, le dernier exemple ne nécessite pas d'utilisation each- les éléments suivants seraient désormais possibles:$(selector).attr('href', function() { return this.replace(/.../, '...'); });
David Hedlund
14
@DavidHedlund Légère correction: vous avez manqué href: ...return this.href.replace(/.../, '...'); });
Armstrongest
280

Avec jQuery 1.6 et supérieur, vous devez utiliser:

$("a").prop("href", "http://www.jakcms.com")

La différence entre propet attrest que attrsaisit l'attribut HTML tandis que propsaisit la propriété DOM.

Vous pouvez trouver plus de détails dans cet article: .prop () vs .attr ()

Jérôme
la source
32
Une explication de la raison pour laquelle vous devriez utiliser propOver attrserait appréciée, pour les personnes venant à la question et trouvant attrapparemment fonctionner parfaitement bien dans les nouvelles versions de jQuery ...
womble
11
L'utilisation de @womble propest plus rapide que attrparce qu'elle met à jour le dom au lieu de modifier le HTML. jsfiddle.net/je4G5
Popnoodles
2
@Popnoodles Il y a plus de problèmes que cela, mais il serait trop long de les expliquer tous ici. Ainsi, les lecteurs devraient simplement jeter un œil au post lié à womble. Cependant, un résumé ici serait bien, sinon ce morceau d'information se perd un peu ..
Rauni Lillemets
78

Utilisez la attrméthode lors de votre recherche. Vous pouvez changer n'importe quel attribut avec une nouvelle valeur.

$("a.mylink").attr("href", "http://cupcream.com");
Peter Shinners
la source
2
Cela a fonctionné pour moi si je mets class = "mylink" dans la balise a. Je voulais juste préciser qu'au cas où quelqu'un essaierait de définir name = "mylink" similaire à la réponse ci-dessus et s'attend à ce que cela fonctionne.
cpuguru
40

Selon que vous souhaitez modifier tous les liens identiques en quelque chose d'autre ou que vous souhaitez contrôler uniquement ceux d'une section donnée de la page ou chacun individuellement, vous pouvez effectuer l'une d'entre elles.

Modifiez tous les liens vers Google afin 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 dans une section donnée, ajoutez la classe div du conteneur au sélecteur. Cet exemple changera 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, quel que soit leur emplacement dans le document, ajoutez un identifiant au lien, puis ajoutez cet identifiant au sélecteur. Cet exemple modifie 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/');
flamingLogos
la source
36

Même si l'OP a explicitement demandé une réponse jQuery, vous n'avez pas besoin d'utiliser jQuery pour tout de nos jours.

Quelques méthodes sans jQuery:

  • Si vous souhaitez modifier la hrefvaleur de tous les <a> éléments, sélectionnez-les tous, puis parcourez la liste de nœuds : (exemple)

    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    
  • Si vous souhaitez modifier la hrefvaleur de tous les <a>éléments qui ont réellement un hrefattribut, sélectionnez-les en ajoutant le [href]sélecteur d'attribut ( a[href]): (exemple)

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    
  • Si vous souhaitez modifier la hrefvaleur des <a>éléments qui contiennent une valeur spécifique, par exemple google.com, utilisez le sélecteur d'attribut a[href*="google.com"]: (exemple)

    var anchors = document.querySelectorAll('a[href*="google.com"]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    

    De même, vous pouvez également utiliser les autres sélecteurs d'attributs . Par exemple:

    • a[href$=".png"]pourrait être utilisé pour sélectionner des <a>éléments dont la hrefvaleur se termine par .png.

    • a[href^="https://"]pourraient être utilisés pour sélectionner des <a>éléments avec des hrefvaleurs qui sont préfixées avec https://.

  • Si vous souhaitez modifier la hrefvaleur des <a>éléments qui remplissent plusieurs conditions: (exemple)

    var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    

..pas besoin de regex, dans la plupart des cas.

Josh Crozier
la source
9

Cet extrait de code est invoqué lorsqu'un clic sur un lien de la classe 'menu_link' est affiché, et affiche le texte et l'url du lien. Le retour faux empêche le lien d'être suivi.

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});
artisan
la source
3
Je ne suis pas trop pédant au sujet du vote négatif, mais si vous ne dites pas pourquoi vous votez contre, il n'y a rien à faire, et vous ne devriez pas vous embêter.
crafter
2
Voté parce que votre extrait de code et votre réponse ne répondent pas à la question d'origine et ne fournissent pas vraiment d'explication sur la raison pour laquelle les informations obtenues à l'aide de l'extrait de code sont utiles.
David Millar
5
Le vote à la baisse est pédant. Il / elle n'a peut-être pas mis autant d'efforts sur sa réponse que les autres utilisateurs, mais il / elle a en effet fourni du code pour résoudre le problème. L'OP aurait juste besoin de réfléchir un peu plus que de copier et coller une solution sur mesure.
Ulises
8

La manière la plus simple de le faire est:

Fonction Attr (depuis la version 1.0 de jQuery)

$("a").attr("href", "https://stackoverflow.com/") 

ou

Fonction Prop (depuis jQuery version 1.6)

$("a").prop("href", "https://stackoverflow.com/")

En outre, l'avantage de la méthode ci-dessus est que si le sélecteur sélectionne une seule ancre, il mettra à jour cette ancre uniquement et si le sélecteur renvoie un groupe d'ancres, il mettra à jour le groupe spécifique via une seule instruction.

Maintenant, il existe de nombreuses façons d'identifier l'ancre exacte ou le groupe d'ancres:

Très simples:

  1. Sélectionnez l'ancre via le nom de la balise: $("a")
  2. Sélectionnez l'ancre via l'index: $("a:eq(0)")
  3. Sélectionnez l'ancre pour des classes spécifiques (comme dans cette classe uniquement les ancres avec classe active):$("a.active")
  4. Sélection d'ancres avec un ID spécifique (ici dans l'exemple d' profileLink ID):$("a#proileLink")
  5. Sélection de la première ancre href: $("a:first")

Les plus utiles:

  1. Sélection de tous les éléments avec l'attribut href: $("[href]")
  2. Sélection de toutes les ancres avec href spécifique: $("a[href='www.stackoverflow.com']")
  3. Sélection de toutes les ancres n'ayant pas de référence spécifique: $("a[href!='www.stackoverflow.com']")
  4. Sélection de toutes les ancres avec href contenant une URL spécifique: $("a[href*='www.stackoverflow.com']")
  5. Sélection de toutes les ancres avec href commençant par une URL spécifique: $("a[href^='www.stackoverflow.com']")
  6. Sélection de toutes les ancres avec href se terminant par une URL spécifique: $("a[href$='www.stackoverflow.com']")

Maintenant, si vous souhaitez modifier des URL spécifiques, vous pouvez le faire comme suit:

Par exemple, si vous souhaitez ajouter un site Web proxy pour toutes les URL allant sur google.com, vous pouvez l'implémenter comme suit:

$("a[href^='http://www.google.com']")
   .each(function()
   { 
      this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) {
        return "http://proxywebsite.com/?query="+encodeURIComponent(x);
    });
   });
Aman Chhabra
la source
6

Arrêtez d'utiliser jQuery juste pour le plaisir! C'est tellement simple avec JavaScript uniquement.

document.querySelector('#the-link').setAttribute('href', 'http://google.com');

https://jsfiddle.net/bo77f8mg/1/

Pawel
la source
8
Pas assez de jQuery.
malckier
3
 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });
Anup
la source
2

Changer le HREF de l'image du logo du thème Wordpress Avada

Si vous installez le plugin PHP ShortCode Exec, vous pouvez créer ce Shortcode que j'ai appelé myjavascript

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

Vous pouvez maintenant aller dans Apparence / Widgets et choisir l'une des zones de widget de pied de page et utiliser un widget de texte pour ajouter le shortcode suivant

[myjavascript]

Le sélecteur peut changer en fonction de l'image que vous utilisez et si elle est prête pour la rétine, mais vous pouvez toujours le découvrir à l'aide des outils de développement.

Tonnelier
la source
2

href dans un attribut, vous pouvez donc le changer en utilisant du JavaScript pur, mais si vous avez déjà injecté jQuery dans votre page, ne vous inquiétez pas, je vais le montrer dans les deux sens:

Imaginez que vous avez ceci hrefci - dessous:

<a id="ali" alt="Ali" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>

Et vous aimez changer le lien ...

En utilisant du JavaScript pur sans bibliothèque, vous pouvez faire:

document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");

Mais aussi dans jQuery vous pouvez faire:

$("#ali").attr("href", "https://stackoverflow.com");

ou

$("#ali").prop("href", "https://stackoverflow.com");

Dans ce cas, si vous avez déjà injecté jQuery, probablement jQuery un look plus court et plus cross-browser ... mais à part ça, je vais avec JScelui ...

Alireza
la source