Wie können Sie die href für einen Hyperlink mit jQuery ändern?
Verwendung von
$("a").attr("href", "http://www.google.com/")
wird die href aller Hyperlinks so geändert, 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 href
-Attribute zu ihnen hinzufügen. Zur Sicherheit können wir also festlegen, dass unser Selektor nur auf Tags mit einem vorhandenen href
-Attribut passt:
$("a[href]") //...
Natürlich werden Sie wahrscheinlich etwas Interessanteres im Sinn haben. Wenn Sie einen Anker mit einem bestimmten vorhandenen href
abgleichen wollen, könnten Sie etwas wie dieses verwenden:
$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')
Dies wird Links finden, bei denen der href
genau mit der Zeichenkette http://www.google.com/
übereinstimmt. Eine kompliziertere Aufgabe könnte darin bestehen, nur einen Teil des href
abzugleichen und dann zu aktualisieren:
$("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 mit https://stackoverflow.com
beginnt. 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 am Link kann hier vorgenommen werden.
Verwenden Sie die Methode attr
für Ihr Lookup. Sie können jedes Attribut durch einen neuen Wert ersetzen.
$("a.mylink").attr("href", "http://cupcream.com");
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 die Klasse des Container-Div's zum Selektor 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 zu ändern, unabhängig davon, wo sie sich im Dokument befinden, fügen Sie dem Link eine ID hinzu und fügen diese ID 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/');