Question Comment changer le href pour un lien hypertexte en utilisant jQuery


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


1087
2017-10-07 18:17


origine


Réponses:


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

... va modifier le href de tous les liens hypertexte pour pointer vers Google. Vous voulez probablement un sélecteur un peu plus raffiné cependant. Par exemple, si vous disposez d'une combinaison de balises d'ancrage de lien (lien hypertexte) et de cible de lien (a.k.a. "ancre"):

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

... Alors vous ne voulez probablement pas ajouter accidentellement href attributs à eux. Pour la sécurité alors, nous pouvons spécifier que notre sélecteur ne correspondra <a> tags avec un existant href attribut:

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

Bien sûr, vous aurez probablement quelque chose de plus intéressant à l'esprit. Si vous voulez faire correspondre une ancre avec un existant existant href, vous pourriez utiliser quelque chose comme ceci:

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

Cela trouvera des liens où le href correspond exactement à la chaîne http://www.google.com/. Une tâche plus complexe pourrait correspondre, puis mettre à jour seulement une partie du 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 où le href départs avec http://stackoverflow.com. Ensuite, une fonction est définie qui utilise une expression régulière simple 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 pourrait être faite ici.


1606
2017-10-07 18:19



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

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

La différence entre prop et attr est-ce attr saisit l'attribut HTML alors que prop récupère la propriété DOM.

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


251
2018-06-14 18:28



Utilisez le attr méthode sur votre recherche. Vous pouvez remplacer n'importe quel attribut par une nouvelle valeur.

$("a.mylink").attr("href", "http://cupcream.com");

69
2017-10-07 18:20



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

Changez 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 dans une section donnée, ajoutez la classe div du conteneur au sélecteur. Cet exemple va changer 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 va changer le deuxième lien Google dans le contenu, mais pas le premier ou le 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/');

37
2017-10-17 17:58



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

Quelques méthodes sans jQuery:

  • Si vous voulez changer le href valeur de tout  <a> éléments, sélectionnez-les tous, puis parcourez le nodelist: (Exemple)

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

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    
  • Si vous voulez changer le href valeur de <a> éléments qui contenir 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 l'autre sélecteurs d'attribut. Par exemple:

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

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

  • Si vous voulez changer le href valeur de <a> éléments qui satisfont 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";
    });
    

..aucun besoin de regex, en plus cas.


29
2018-01-19 00:51



Cet extrait appelle lorsqu'un lien de la classe 'menu_link' est cliqué et affiche le texte et l'URL du lien. Le retour false empêche le suivi du lien.

<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;
});

8
2017-12-10 06:25



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

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

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


6
2017-09-01 16:17