web-dev-qa-db-fra.com

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

Comment pouvez-vous changer le href pour un hyperlien utilisant jQuery?

javascriptjqueryhyperlink
1211
Brian Boatright

En utilisant

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

modifiera 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 avez une combinaison de balises d'ancrage lien source (hyperlien) et cible (a.k.a. "ancre"):

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

... Ensuite, vous ne voudrez probablement pas ajouter accidentellement les attributs href. Par sécurité, nous pouvons alors spécifier que notre sélecteur ne fera correspondre que les balises <a> avec un attribut existant href:

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

Bien sûr, vous aurez probablement quelque chose de plus intéressant en tête. Si vous voulez faire correspondre une ancre avec un href existant existant, vous pouvez utiliser quelque chose comme ceci:

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

Ceci trouvera des liens où href correspond exactement à la chaîne http://www.google.com/. Une tâche plus complexe peut correspondre, puis ne met à jour qu'une partie de la variable 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ù href commence 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 - toute sorte de modification du lien pourrait être faite ici.

1757
Shog9

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

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

La différence entre prop et attr est que attr saisit l'attribut HTML alors que prop saisit la propriété DOM.

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

276
Jerome

Utilisez la méthode attr sur votre recherche. Vous pouvez désactiver n'importe quel attribut avec une nouvelle valeur.

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

Selon que vous souhaitiez modifier tous les liens identiques ou autre chose ou si vous souhaitez contrôler uniquement ceux d'une section donnée de la page ou de chaque élément individuellement, vous pouvez en choisir un.

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 changer les liens dans une section donnée, ajoutez la classe du conteneur div 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 quel que soit 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 bas 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/');
38
flamingLogos

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

Quelques méthodes sans jQuery:

  • Si vous souhaitez modifier la valeur href de tous<a> éléments, sélectionnez-les tous et puis parcourez nodelist : (exemple) 

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

  • Si vous souhaitez modifier la valeur href de tous les éléments <a> possédant réellement un attribut href, sélectionnez-les en ajoutant le sélecteur d'attribut [href] (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 valeur href de <a> éléments contenant ​​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'attributs . Par exemple:

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

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

  • Si vous souhaitez modifier la 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";
});

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

33
Josh Crozier

Cet extrait de code est appelé lorsque l'utilisateur clique sur un lien de la classe 'menu_link' et affiche le texte et l'URL du lien. Le retour false 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;
});
9
crafter

Le moyen simple de le faire est:

fonction Attr (depuis la version 1.0 de jQuery) 

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

ou

Fonction Prop (depuis la version 1.6 de jQuery) 

$("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 ne mettra à jour que cette ancre et si le sélecteur renvoie un groupe d’ancres, il mettra à jour le groupe spécifique au moyen d’une seule instruction.

Maintenant, il y a beaucoup de façons d'identifier une ancre exacte ou un groupe d'ancres:

Assez simple:

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

Autres utiles:

  1. Sélection de tous les éléments avec l'attribut href: $("[href]")
  2. Sélection de toutes les ancres avec un href spécifique: $("a[href='www.stackoverflow.com']")
  3. Sélection de toutes les ancres n'ayant pas de href 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 voulez 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 de google.com, vous pouvez le mettre en œuvre de la manière suivante:

$("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);
    });
   });
5
Aman Chhabra

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

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

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

5
Pawel
 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });
3
Anup

Changer le HREF du Wordpress Avada Theme Logo Image

Si vous installez le plugin ShortCode Exec PHP, 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 à Apparence/Widgets et choisir l'une des zones de widget de pied de page et utiliser un widget de texte pour ajouter le code court suivant

[myjavascript]

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

2
Cooper

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

Imaginez que vous avez ceci href ci-dessous:

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

Et vous aimez changer le lien ...

En utilisant JavaScript pur sans aucune 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, jQuery a probablement un look plus court et plus multi-navigateurs ... mais sinon, je vais avec le JS un ...

1
Alireza