So ändern Sie die href für einen Hyperlink mit jQuery

1267

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

Brian Boatright
quelle
12
Für diejenigen unter Ihnen, die an Lösungen ohne die Verwendung von jQuery interessiert sind - stackoverflow.com/questions/179713/…
Josh Crozier
1
Für neuere jQuery-Versionen: stackoverflow.com/a/6348239/4928642
Qwertiy
1
das einfachste Beispiel ohne jQuery stackoverflow.com/a/39276418/696535
Pawel
Eine vollständige Liste möglicher Lösungen, einige nützliche Selektoren und eine Möglichkeit, den Wert von Übereinstimmungen mit Regex zu ermitteln und diese zum Aktualisieren von href: stackoverflow.com/a/49568546/1262248
Aman Chhabra

Antworten:

1832

Verwenden von

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

ändert die href aller Hyperlinks so, dass sie auf Google verweisen. Sie möchten wahrscheinlich einen etwas verfeinerten Selektor. Wenn Sie beispielsweise eine Mischung aus Anker-Tags für Linkquelle (Hyperlink) und Linkziel (auch als "Anker" bezeichnet) haben:

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

... Dann möchten Sie ihnen wahrscheinlich nicht versehentlich hrefAttribute hinzufügen . Aus Sicherheitsgründen können wir dann festlegen, dass unser Selektor nur übereinstimmt<a> Tags mit einem vorhandenen hrefAttribut abgleichen soll:

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

Natürlich haben Sie wahrscheinlich etwas Interessanteres im Sinn. Wenn Sie einen Anker mit einem bestimmten vorhandenen Anker abgleichen möchtenhref , können Sie Folgendes verwenden:

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

Hier finden Sie Links, bei denen hrefdie Zeichenfolge genau mit der Zeichenfolge übereinstimmt http://www.google.com/. Eine komplexere Aufgabe könnte darin bestehen, nur einen Teil der Aufgabe zu aktualisieren und dann zu aktualisierenhref :

$("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 , wo die href beginnt mit http://stackoverflow.com. Anschließend 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 Sie dadurch erhalten. Hier können Sie jede Art von Änderung am Link vornehmen.

Shog9
quelle
3
"In HTML wird bei Groß- und Kleinschreibung nicht zwischen Groß- und Kleinschreibung unterschieden, in XML wird jedoch zwischen Groß- und Kleinschreibung unterschieden." - w3.org/TR/CSS21/selector.html
Augenlidlosigkeit
47
Der Vollständigkeit halber, da dies immer noch gelegentlich verknüpft wird, eachmöchte ich hinzufügen, dass seit jQuery 1.4 für das letzte Beispiel keine Verwendung erforderlich ist - Folgendes wäre jetzt möglich:$(selector).attr('href', function() { return this.replace(/.../, '...'); });
David Hedlund
14
@ DavidHedlund Leichte Korrektur: Sie haben verpasst href: ...return this.href.replace(/.../, '...'); });
Armstrongest
280

Mit jQuery 1.6 und höher sollten Sie Folgendes verwenden:

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

Der Unterschied zwischen propund attrbesteht darin, dass attrdas HTML-Attribut während erfasst wirdprop erfasst die DOM-Eigenschaft erfasst wird.

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

Hieronymus
quelle
32
Eine Erklärung, warum Sie propover verwenden sollten, attrwäre dankbar, wenn Leute auf die Frage kommen und feststellen attr, dass sie in neueren jQuery-Versionen anscheinend einwandfrei funktionieren ...
womble
11
@womble using propist schneller als attrweil es den dom aktualisiert, anstatt den HTML- Code zu ändern . jsfiddle.net/je4G5
Popnoodles
2
@ Popnoodles Es gibt mehr Probleme als das, aber es wäre zu lang, sie alle hier zu erklären. Die Leser sollten sich also nur den verlinkten Beitrag ansehen. Eine Zusammenfassung hier wäre jedoch schön, sonst geht diese Information irgendwie verloren.
Rauni Lillemets
78

Verwenden Sie die attrMethode bei Ihrer Suche. Sie können jedes Attribut mit einem neuen Wert austauschen.

$("a.mylink").attr("href", "http://cupcream.com");
Peter Shinners
quelle
2
Dies hat bei mir funktioniert, wenn ich im a-Tag class = "mylink" gesetzt habe. Ich wollte nur klarstellen, dass für den Fall, dass jemand versucht, name = "mylink" ähnlich wie in der obigen Antwort festzulegen und zu erwarten, dass es funktioniert.
Cpuguru
40

Abhängig davon, ob Sie alle identischen Links zu etwas anderem ändern möchten oder nur die in einem bestimmten Abschnitt der Seite oder jeweils einzeln steuern möchten, können Sie einen dieser Schritte ausführen.

Ä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 die Klasse des Container-Div zum Selektor hinzu. In diesem Beispiel wird der Google-Link im Inhalt 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 zu ändern, unabhängig davon, 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 Inhalt geändert, nicht jedoch 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/');
flamingLogos
quelle
36

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

Einige Methoden ohne jQuery:

  • Wenn Sie den hrefWert aller <a> Elemente ändern möchten , wählen Sie sie alle aus und durchlaufen Sie dann die Knotenliste : (Beispiel)

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

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
  • Wenn Sie beispielsweise den hrefWert von <a>Elementen ändern möchten , die einen bestimmten Wert enthaltengoogle.com , verwenden Sie die Attributauswahl 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 die anderen Attributselektoren verwenden . Zum Beispiel:

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

    • a[href^="https://"]werden könnte , auszuwählen , die verwendeten <a>Elemente mit hrefWerten , die sie voran mit https://.

  • Wenn Sie den hrefWert von <a>Elementen ändern möchten , 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 den meisten Fällen.

Josh Crozier
quelle
9

Dieses Snippet wird aufgerufen, wenn auf einen Link der Klasse 'menu_link' geklickt wird, und zeigt den Text und die URL des Links an. Die Rückgabe false verhindert, dass dem Link gefolgt 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;
});
Handwerker
quelle
3
Ich bin nicht zu pedantisch in Bezug auf die Ablehnung, aber wenn Sie nicht sagen wollen, warum Sie eine Abstimmung ablehnen, wird nichts erreicht, und Sie sollten sich nicht darum kümmern.
Crafter
2
Abgestimmt, weil Ihr Snippet und Ihre Antwort die ursprüngliche Frage nicht beantworten und keine Erklärung dafür liefern, warum die mit dem Snippet erhaltenen Informationen hilfreich sind.
David Millar
5
Das Down-Voting ist pedantisch. Er / sie hat sich möglicherweise nicht so viel Mühe gegeben wie andere Benutzer, aber er / sie hat tatsächlich Code bereitgestellt, um das Problem zu beheben. Das OP müsste nur ein wenig mehr darüber nachdenken, außer eine maßgeschneiderte Lösung zu kopieren und einzufügen.
Ulises
8

Der einfache Weg dazu ist:

Attr-Funktion (seit jQuery Version 1.0)

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

oder

Prop-Funktion (seit jQuery Version 1.6)

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

Der oben beschriebene Vorteil besteht auch darin, dass, wenn der Selektor einen einzelnen Anker auswählt, nur dieser Anker aktualisiert wird und wenn der Selektor eine Gruppe von Ankern zurückgibt, die spezifische Gruppe nur über eine Anweisung aktualisiert wird.

Nun gibt es viele Möglichkeiten, den genauen Anker oder die Gruppe von Ankern zu identifizieren:

Ganz einfache:

  1. Wählen Sie den Anker über den Tag-Namen aus: $("a")
  2. Anker durch Index auswählen: $("a:eq(0)")
  3. Wählen Sie Anker für bestimmte Klassen aus (wie in dieser Klasse nur Anker mit Klasse active ):$("a.active")
  4. Auswahl von Ankern mit spezifischer ID (hier im Beispiel profileLink ID):$("a#proileLink")
  5. Auswahl des ersten Ankers href: $("a:first")

Weitere nützliche:

  1. Auswahl aller Elemente mit href-Attribut: $("[href]")
  2. Auswahl aller Anker mit spezifischem href: $("a[href='www.stackoverflow.com']")
  3. Auswahl aller Anker ohne spezifische href: $("a[href!='www.stackoverflow.com']")
  4. Auswahl aller Anker mit href, die eine bestimmte URL enthalten: $("a[href*='www.stackoverflow.com']")
  5. Auswahl aller Anker mit href beginnend mit einer bestimmten URL: $("a[href^='www.stackoverflow.com']")
  6. Auswählen aller Anker mit href, die mit einer bestimmten URL enden: $("a[href$='www.stackoverflow.com']")

Wenn Sie nun bestimmte URLs ändern möchten, können Sie dies wie folgt tun:

Wenn Sie beispielsweise eine Proxy-Website für alle URLs zu google.com hinzufügen möchten, können Sie diese wie folgt implementieren:

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

Stoppen Sie die Verwendung von jQuery nur deswegen! Dies ist nur mit JavaScript so einfach.

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

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

Pawel
quelle
8
Nicht genug jQuery.
malckier
3
 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });
Anup
quelle
2

Ändern Sie die HREF des Wordpress Avada Theme Logo Image

Wenn Sie das ShortCode Exec PHP-Plugin installieren, können Sie diesen Shortcode erstellen, den ich myjavascript nannte

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

Sie können jetzt zu Darstellung / Widgets gehen und einen der Fußzeilen-Widget-Bereiche auswählen und mithilfe eines Text-Widgets den folgenden Shortcode hinzufügen

[myjavascript]

Die Auswahl kann sich ändern, je nachdem, welches Bild Sie verwenden und ob es für die Netzhaut bereit ist. Sie können es jedoch jederzeit mithilfe von Entwicklertools herausfinden.

Cooper
quelle
2

href in einem Attribut, damit Sie es mit reinem JavaScript ändern können, aber wenn Sie bereits jQuery in Ihre Seite eingefügt haben, machen Sie sich keine Sorgen, ich werde es in beide Richtungen zeigen:

Stellen Sie sich vor, Sie haben hrefFolgendes:

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

Und Sie möchten den Link ändern ...

Mit reinem JavaScript ohne Bibliothek können Sie Folgendes tun:

document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");

Aber auch in jQuery können Sie Folgendes tun:

$("#ali").attr("href", "https://stackoverflow.com");

oder

$("#ali").prop("href", "https://stackoverflow.com");

In diesem Fall, wenn Sie bereits jQuery injiziert haben, sieht jQuery wahrscheinlich kürzer und browserübergreifender aus ... aber ansonsten gehe ich mit dem JSeinen ...

Alireza
quelle