Wie man das href-Attribut für einen Hyperlink mit jQuery ändern

Question

Wie können Sie die href Attribut (Linkziel) für einen Hyperlink mit jQuery?

Answer 1

Verwendung von

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

wird die href aller Hyperlinks so ändern, dass sie auf Google verweisen. Wahrscheinlich wollen Sie aber einen etwas raffinierteren 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 wollen Sie wahrscheinlich nicht versehentlich die href Attribute zu. Zur Sicherheit können wir dann festlegen, dass unser Selektor nur mit <a> Tags mit einer bestehenden href Attribut:

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

Natürlich werden Sie wahrscheinlich etwas Interessanteres im Sinn haben. Wenn Sie einen Anker mit einem bestimmten vorhandenen Anker abgleichen wollen href könnten Sie etwa so vorgehen:

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

Damit werden Links gefunden, bei denen die href genau mit der Zeichenfolge http://www.google.com/ . Eine aufwändigere Aufgabe könnte der Abgleich und die anschließende Aktualisierung nur eines Teils der 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, bei denen die href startet con 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 dies bietet - jede Art von Änderung des Links kann hier vorgenommen werden.

Answer 2

Mit jQuery 1.6 und höher sollten Sie verwenden:

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

Der Unterschied zwischen prop y attr ist das attr nimmt das HTML-Attribut auf, während prop greift sich die DOM-Eigenschaft.

Weitere Einzelheiten finden Sie in diesem Beitrag: .prop() vs .attr()

Answer 3

Verwenden Sie die attr Methode für Ihr Nachschlagen. Sie können jedes Attribut durch einen neuen Wert ersetzen.

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

Answer 4

_{Auch wenn der OP ausdrücklich nach einer jQuery-Antwort gefragt hat, muss man heutzutage nicht mehr für alles jQuery verwenden.}

Ein paar Methoden ohne jQuery:

• Wenn Sie die href Wert von todo <a> Elemente, wählen Sie sie alle aus und durchlaufen Sie dann die nodelist : (Beispiel)

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

• Wenn Sie die href Wert aller <a> Elemente, die tatsächlich eine href Attribut, wählen Sie sie durch Hinzufügen des [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 die href Wert von <a> Elemente, die enthalten einen bestimmten Wert, zum Beispiel google.com verwenden Sie den Attributselektor 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";
  });

  In gleicher Weise können Sie auch die anderen 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 vorangestellt con https:// .

• Wenn Sie die 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.

Answer 5

Je nachdem, ob Sie alle identischen Links in etwas anderes umwandeln wollen oder nur die Links in einem bestimmten Abschnitt der Seite oder jeden einzelnen Link kontrollieren wollen, können Sie eine der folgenden Möglichkeiten nutzen.

Ändern Sie alle Links zu Google, so dass sie auf Google Maps verweisen:

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

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

Um Links in einem bestimmten Abschnitt zu ändern, fügen Sie dem Selektor die Klasse des Container-Divs hinzu. In diesem Beispiel wird der Google-Link im Inhalt geändert, aber 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 von ihrer Position im Dokument zu ändern, fügen Sie dem Link eine ID hinzu und fügen diese ID dann dem Selektor hinzu. In diesem Beispiel wird der zweite Google-Link im Inhalt geändert, nicht aber der erste oder der 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/');