Wie können Sie die href für einen Hyperlink mit jQuery ändern?
javascript
jquery
hyperlink
Brian Boatright
quelle
quelle
Antworten:
Verwenden von
ä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:
... Dann möchten Sie ihnen wahrscheinlich nicht versehentlich
href
Attribute hinzufügen . Aus Sicherheitsgründen können wir dann festlegen, dass unser Selektor nur übereinstimmt<a>
Tags mit einem vorhandenenhref
Attribut abgleichen soll:Natürlich haben Sie wahrscheinlich etwas Interessanteres im Sinn. Wenn Sie einen Anker mit einem bestimmten vorhandenen Anker abgleichen möchten
href
, können Sie Folgendes verwenden:Hier finden Sie Links, bei denen
href
die Zeichenfolge genau mit der Zeichenfolge übereinstimmthttp://www.google.com/
. Eine komplexere Aufgabe könnte darin bestehen, nur einen Teil der Aufgabe zu aktualisieren und dann zu aktualisierenhref
: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.quelle
each
mö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(/.../, '...'); });
href
:...return this.href.replace(/.../, '...'); });
Mit jQuery 1.6 und höher sollten Sie Folgendes verwenden:
Der Unterschied zwischen
prop
undattr
besteht darin, dassattr
das HTML-Attribut während erfasst wirdprop
erfasst die DOM-Eigenschaft erfasst wird.Weitere Details finden Sie in diesem Beitrag: .prop () vs .attr ()
quelle
prop
over verwenden sollten,attr
wäre dankbar, wenn Leute auf die Frage kommen und feststellenattr
, dass sie in neueren jQuery-Versionen anscheinend einwandfrei funktionieren ...prop
ist schneller alsattr
weil es den dom aktualisiert, anstatt den HTML- Code zu ändern . jsfiddle.net/je4G5Verwenden Sie die
attr
Methode bei Ihrer Suche. Sie können jedes Attribut mit einem neuen Wert austauschen.quelle
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:
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:
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:
quelle
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
href
Wert aller<a>
Elemente ändern möchten , wählen Sie sie alle aus und durchlaufen Sie dann die Knotenliste : (Beispiel)Wenn Sie den
href
Wert aller<a>
Elemente ändern möchten, die tatsächlich einhref
Attribut haben, wählen Sie sie aus, indem Sie den[href]
Attributselektor (a[href]
) hinzufügen : (Beispiel)Wenn Sie beispielsweise den
href
Wert von<a>
Elementen ändern möchten , die einen bestimmten Wert enthaltengoogle.com
, verwenden Sie die Attributauswahla[href*="google.com"]
: (Beispiel)Ebenso können Sie auch die anderen Attributselektoren verwenden . Zum Beispiel:
a[href$=".png"]
könnte verwendet werden, um<a>
Elemente auszuwählen , derenhref
Wert mit endet.png
.a[href^="https://"]
werden könnte , auszuwählen , die verwendeten<a>
Elemente mithref
Werten , die sie voran mithttps://
.Wenn Sie den
href
Wert von<a>
Elementen ändern möchten , die mehrere Bedingungen erfüllen: (Beispiel)..keine Notwendigkeit für Regex, in den meisten Fällen.
quelle
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.
quelle
Der einfache Weg dazu ist:
Attr-Funktion (seit jQuery Version 1.0)
oder
Prop-Funktion (seit jQuery Version 1.6)
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:
$("a")
$("a:eq(0)")
active
):$("a.active")
profileLink
ID):$("a#proileLink")
$("a:first")
Weitere nützliche:
$("[href]")
$("a[href='www.stackoverflow.com']")
$("a[href!='www.stackoverflow.com']")
$("a[href*='www.stackoverflow.com']")
$("a[href^='www.stackoverflow.com']")
$("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:
quelle
Stoppen Sie die Verwendung von jQuery nur deswegen! Dies ist nur mit JavaScript so einfach.
https://jsfiddle.net/bo77f8mg/1/
quelle
quelle
Ä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
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
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.
quelle
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
href
Folgendes:Und Sie möchten den Link ändern ...
Mit reinem JavaScript ohne Bibliothek können Sie Folgendes tun:
Aber auch in jQuery können Sie Folgendes tun:
oder
In diesem Fall, wenn Sie bereits jQuery injiziert haben, sieht jQuery wahrscheinlich kürzer und browserübergreifender aus ... aber ansonsten gehe ich mit dem
JS
einen ...quelle