Frage Wie man die href für einen Hyperlink mit jQuery ändert


Wie können Sie die href für einen Hyperlink mit jQuery ändern?


1087
2017-10-07 18:17


Ursprung


Antworten:


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

... Ändert die href aller Hyperlinks auf Google. Sie möchten wahrscheinlich einen etwas verfeinerten Selektor. Zum Beispiel, wenn Sie eine Mischung aus Link-Quelle (Hyperlink) und Link-Ziel (a.k.a. "Anker") Anker-Tags haben:

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

... Dann möchtest du wahrscheinlich nicht versehentlich hinzufügen href Attribute zu ihnen. Aus Sicherheitsgründen können wir angeben, dass unser Selektor nur passt <a> Tags mit einem vorhandenen href Attribut:

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

Natürlich haben Sie wahrscheinlich etwas Interessanteres im Sinn. Wenn Sie einen Anker mit einem bestimmten vorhandenen übereinstimmen möchten href, könnten Sie etwas wie folgt verwenden:

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

Dies wird Links finden, wo die href stimmt genau mit der Zeichenfolge überein http://www.google.com/. Eine kompliziertere Aufgabe könnte übereinstimmen und dann nur einen Teil der Aufgabe aktualisieren href:

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

Der erste Teil wählt nur Links aus, in denen der href steht beginnt mit http://stackoverflow.com. Dann wird eine Funktion definiert, die einen einfachen regulären Ausdruck verwendet, um diesen Teil der URL durch einen neuen zu ersetzen. Beachten Sie die Flexibilität, die Ihnen hier geboten wird - hier könnte jede Art von Änderung an der Verbindung vorgenommen werden.


1606
2017-10-07 18:19



Mit jQuery 1.6 und höher sollten Sie verwenden:

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

Der Unterschied zwischen prop und attr ist das attr ergreift das HTML-Attribut während prop ergreift die DOM-Eigenschaft.

Sie können weitere Details in diesem Post finden: .prop () vs .attr ()


251
2018-06-14 18:28



Benutze die attr Methode für Ihre Suche. Sie können jedes Attribut mit einem neuen Wert ausschließen.

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

69
2017-10-07 18:20



Je nachdem, ob Sie alle identischen Links zu etwas anderem ändern möchten oder nur die Kontrolle in einem bestimmten Abschnitt der Seite oder jeder einzeln steuern möchten, können Sie eine davon ausführen.

Ändere alle Links zu Google, sodass sie auf Google Maps zeigen:

<a href="http://www.google.com">

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

Um Verknüpfungen in einem bestimmten Abschnitt zu ändern, fügen Sie die Klasse des Container-DIV zum Selektor hinzu. In diesem Beispiel wird der Google-Link im Content geändert, jedoch nicht in der Fußzeile:

<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/');

Um einzelne Links unabhängig davon zu ändern, wo sie in das Dokument fallen, fügen Sie dem Link eine ID hinzu und fügen Sie diese ID dann dem Selektor hinzu. In diesem Beispiel wird der zweite Google-Link im Content geändert, aber nicht der erste oder der zweite in der Fußzeile:

<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



Obwohl das OP explizit nach einer jQuery-Antwort gefragt hat, müssen Sie jQuery jetzt nicht für alles verwenden.

Ein paar Methoden ohne jQuery:

  • Wenn Sie das ändern möchten href Wert von alle  <a> Elemente, wähle sie alle aus und iteriere dann durch die Knotenliste: (Beispiel)

    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    
  • Wenn Sie das ändern möchten href Wert von allen <a> Elemente, die tatsächlich eine haben href Attribut, wählen Sie sie aus, indem Sie das hinzufügen [href] Attributselektor (a[href]): (Beispiel)

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    
  • Wenn Sie das ändern möchten href Wert von <a> Elemente, die enthalten ein bestimmter Wert, zum Beispiel google.com, verwende den Attributswähler a[href*="google.com"]: (Beispiel)

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

    Ebenso können Sie auch das andere verwenden Attributselektoren. Zum Beispiel:

    • a[href$=".png"]könnte verwendet werden, um auszuwählen <a> Elemente deren href Wert endet mit .png.

    • a[href^="https://"]könnte verwendet werden, um auszuwählen <a> Elemente mit href Werte, die sind vorangestellt mit https://.

  • Wenn Sie das ändern möchten href Wert von <a> Elemente, die mehrere Bedingungen erfüllen: (Beispiel)

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

..keine Notwendigkeit für Regex, in die meisten Fälle.


29
2018-01-19 00:51



Dieser Snippet wird aufgerufen, wenn auf einen Link der Klasse 'menu_link' geklickt wird, und zeigt den Text und die URL des Links an. Der Rückgabewert false verhindert, dass die Verknüpfung befolgt wird.

<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



Hör auf jQuery zu verwenden, nur um es zu tun! Dies ist mit JavaScript nur so einfach.

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

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


6
2017-09-01 16:17