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

Question

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

Answer 1

Utilisation

$("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 un mélange de lien source (lien hypertexte) et lien cible (a.k.a. & Quot; ancre & Quot;) balises d'ancrage:

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

... Alors vous ne voulez probablement pas leur ajouter accidentellement href attributs. Par sécurité, nous pouvons alors spécifier que notre sélecteur ne fera correspondre que les <a> balises avec un http://www.google.com/ attribut existant:

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

Bien sûr, vous aurez probablement quelque chose de plus intéressant en tête. Si vous souhaitez faire correspondre une ancre avec un existant http://stackoverflow.com spécifique, vous pouvez utiliser quelque chose comme ceci:

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

Ceci trouvera des liens où <=> correspond exactement à la chaîne <=>. Une tâche plus complexe pourrait correspondre, puis ne mettre à jour qu'une partie de <=>:

$("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 par <=>. 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.

Answer 2

Avec jQuery 1.6 et les versions ultérieures, vous devez utiliser:

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

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

Vous trouverez plus de détails dans ce message: .prop () vs .attr ()

Answer 3

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

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

Answer 4

Selon que vous souhaitiez changer tous les liens identiques ou autre chose, ou que vous souhaitiez contrôler uniquement ceux d'une section donnée de la page ou de chacun 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 modifier 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/');

Answer 5

_{Même si le PO 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 href valeur de tous <a> éléments, sélectionnez-les tous, puis parcourez l'élément nodelistlist : ( exemple)

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

• Si vous souhaitez modifier la [href] valeur de tous les a[href] éléments ayant réellement un attribut google.com, sélectionnez-les en ajoutant le sélecteur d'attributs a[href*="google.com"] (a[href$=".png"]): (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 .png valeur des a[href^="https://"] éléments qui contiennent une valeur spécifique, par exemple https://, utilisez le sélecteur d'attribut <=>: (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:

  • <=> peut être utilisé pour sélectionner <=> des éléments dont <=> la valeur se termine par <=>.

  • <=> peut être utilisé pour sélectionner <=> des éléments avec <=> des valeurs dont le préfixe est préfixé avec <=>.

• Si vous souhaitez modifier la <=> valeur des <=> éléments répondant à 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.

Answer 6

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

Answer 7

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/

Answer 8

La façon simple de le faire est:

Fonction Attr (depuis jQuery version 1.0) p>

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

ou

Fonction Prop (depuis la version 1.6 de jQuery)

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

De plus, 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 ce dernier renvoie un groupe d’ancres, il mettra à jour le groupe spécifique au moyen d’une seule instruction.

Il existe de nombreuses façons d'identifier une ancre ou un groupe d'ancres exactes:

Principaux éléments simples:

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

Les plus utiles:

6. Sélection de tous les éléments avec l'attribut href: $("[href]")
7. Sélection de toutes les ancres avec un href spécifique: $("a[href='www.stackoverflow.com']")
8. Sélection de toutes les ancres sans href spécifique: $("a[href!='www.stackoverflow.com']")
9. Sélection de toutes les ancres avec href contenant une URL spécifique: $("a[href*='www.stackoverflow.com']")
10. Sélection de toutes les ancres avec href commençant par une URL spécifique: $("a[href^='www.stackoverflow.com']")
11. 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 en tant que:

Par exemple, si vous souhaitez ajouter un site Web proxy à toutes les URL de google.com, vous pouvez le mettre en œuvre 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);
    });
   });

Answer 9

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

Answer 10

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 accéder à Apparence/Widgets, 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 comprendre en utilisant les outils de développement.

Answer 11

href dans un attribut, vous pouvez donc le modifier 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 JS ci-dessous:

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

Et vous aimez changer le lien ...

Vous pouvez utiliser du code JavaScript pur sans librairie:

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 l’air plus court et plus multi-navigateurs ... mais à part ça, je vais avec le <=> un ...