Festlegen des href-Attributs zur Laufzeit

202

Wie kann das hrefAttribut des <a>Tags zur Laufzeit mit jQuery am besten festgelegt werden?

Wie erhalten Sie mit jQuery den Wert des hrefAttributs des <a>Tags?

javascript jquery html

— Gautamlakum
quelle

378

Um ein Attribut eines HTML-Elements abzurufen oder festzulegen, können Sie die element.attr()Funktion in jQuery verwenden.

Verwenden Sie den folgenden Code, um das href- Attribut abzurufen :

var a_href = $('selector').attr('href');

Verwenden Sie den folgenden Code, um das href- Attribut festzulegen :

$('selector').attr('href','http://example.com');

Verwenden Sie in beiden Fällen den entsprechenden Selektor. Wenn Sie die Klasse für das Ankerelement festgelegt haben, verwenden Sie '.class-name'und wenn Sie die ID für das Ankerelement festgelegt haben, verwenden Sie '#element-id'.

— Stout Joe
quelle

1

Ich habe das benutzt, um href zu bekommen. alert ($ ("# Publish-Link"). attr ("href")); Und es gab mir Alarm "undefiniert".

— Gautamlakum

3

Dies bedeutet wahrscheinlich, dass Ihr Publish-Link eher eine Klasse als eine ID ist. try: alert ($ (". Publish-Link"). attr ("href")); stattdessen

— Jim Tollan

3

@ Lakum4stackof: Es wäre hilfreich, wenn Sie das genaue <a Tag, das Sie hier verwenden,

ahh sorry Du hast recht. Ich habe Klasse angewendet und '#' im JQuery-Code verwendet. es funktionierte mit alert ($ (". Publish-Link"). attr ("href")); Vielen Dank. :)

— Gautamlakum

18

In jQuery 1.6+ ist es besser zu verwenden:

$(selector).prop('href',"http://www...") zu setzen , den Wert, und

$(selector).prop('href') zu erhalten , den Wert

Kurz gesagt, .propruft Werte für das DOM- Objekt ab .attrund legt Werte für HTML fest . Dies macht .propin einigen Kontexten etwas schneller und möglicherweise zuverlässiger.

— Gerbus
quelle

1

Ich bin damit einverstanden, dass '.prop' den vollständigen Pfad wie folgt erhält: http: //www.../index.html, während .attr nur Folgendes erhält: 'index.html'

— DevWL

14

Setzen Sie das hrefAttribut mit

$(selector).attr('href', 'url_goes_here');

und lesen Sie es mit

$(selector).attr('href');

Wobei "Selektor" ein gültiger jQuery-Selektor für Ihr <a>Element ist (".myClass" oder "#myId", um die einfachsten zu nennen).

Hoffe das hilft !

— Valentin Flachsel
quelle

Ich habe das benutzt, um href zu bekommen. alert ($ ("# Publish-Link"). attr ("href")); Und es gab mir Alarm "undefiniert".

— Gautamlakum

@ lakum4stackof Sie haben diesen Warncode höchstwahrscheinlich ausgeführt, bevor Sie Ihr hrefAttribut festgelegt haben, vorausgesetzt, Ihre Auswahl ist korrekt.

— Valentin Flachsel

2

try: alert ($ (". Publish-Link"). attr ("href")); als Ihr Element kann eine Klasse eher als eine ID sein. in der Tat, wahrscheinlich mit $ (this), wenn es in Ihrem Event ist

— Jim Tollan

2

Kleiner Leistungstestvergleich für drei Lösungen:

$(".link").prop('href',"https://example.com")
$(".link").attr('href',"https://example.com")
document.querySelector(".link").href="https://example.com";

Hier können Sie den Test selbst durchführen https://jsperf.com/a-href-js-change

Wir können href-Werte auf folgende Weise lesen

let href = $(selector).prop('href');
let href = $(selector).attr('href');
let href = document.querySelector(".link").href;

Hier können Sie den Test selbst durchführen https://jsperf.com/a-href-js-read

— Kamil Kiełczewski
quelle

Nett! Seltsamerweise bekomme ich entgegengesetzte Ergebnisse von Ihnen, aber es ist interessant, sie selbst ausführen zu können.

— HoldOffHunger

@HoldOffHunger ja - sehr interessant - was ist Ihr Computer, Betriebssystem und Browser?

— Kamil Kiełczewski

1

FF59, Win10. Die Ergebnisse scheinen sich wieder leicht geändert zu haben (möglicherweise hängt es von der Anzahl der geöffneten Registerkarten ab), aber meistens immer noch dieselben: imgur.com/a/MLDnTWM Maschine: 10 Jahre altes Intel-Board (dp55wg), 3,1 GHz Quad-Core, 16 GB DDR3-RAM, GTX1070.

— HoldOffHunger

1

<style>
a:hover {
    cursor:pointer;
}
</style>

<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".link").click(function(){
        var href = $(this).attr("href").split("#");
        $(".results").text(href[1]);
    })
})
</script>



<a class="link" href="#one">one</a><br />
<a class="link" href="#two">two</a><br />
<a class="link" href="#three">three</a><br />
<a class="link" href="#four">four</a><br />
<a class="link" href="#five">five</a>


<br /><br />
<div class="results"></div>

— Nanang HD
quelle

1

Nur-Code-Antworten sind nicht so hilfreich wie Antworten mit Arbeitscode und hilfreichen Erklärungen. In diesem Fall lohnt es sich, diese Antwort einem 5-Jährigen zu erklären.

— Somnath Muluk