Mengatur atribut href saat runtime

202

Apa cara terbaik untuk mengatur hrefatribut <a>tag pada waktu berjalan menggunakan jQuery?

Juga, bagaimana Anda mendapatkan nilai hrefatribut dari <a>tag menggunakan jQuery?

javascript jquery html

— gautamlakum
sumber

378

Untuk mendapatkan atau mengatur atribut elemen HTML, Anda bisa menggunakan element.attr()fungsi di jQuery.

Untuk mendapatkan atribut href , gunakan kode berikut:

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

Untuk mengatur atribut href , gunakan kode berikut:

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

Dalam kedua kasus, harap gunakan pemilih yang sesuai. Jika Anda telah menetapkan kelas untuk elemen jangkar, gunakan '.class-name'dan jika Anda telah menetapkan id untuk elemen jangkar, gunakan '#element-id'.

— Joe yang gagah
sumber

1

Saya menggunakan ini untuk mendapatkan href. alert ($ ("# publish-link"). attr ("href")); Dan itu memberi saya peringatan "tidak terdefinisi".

— gautamlakum

3

itu mungkin berarti bahwa tautan publikasi Anda adalah kelas dan bukan sebuah id. coba: lansiran ($ (". publish-link"). attr ("href")); sebaliknya

— jim tollan

3

@ lakum4stackof: Ini akan membantu jika Anda memposting tag <a> yang tepat Anda gunakan di sini :)

ahh maaf kamu benar. Saya telah menerapkan kelas dan saya menggunakan '#' dalam kode jquery. ini bekerja dengan alert ($ (". publish-link"). attr ("href")); Terima kasih banyak. :)

— gautamlakum

18

Di jQuery 1.6+ lebih baik digunakan:

$(selector).prop('href',"http://www...")untuk mengatur nilai, dan

$(selector).prop('href')untuk mendapatkan nilai

Singkatnya, .propdapatkan dan set nilai pada objek DOM , dan .attrdapatkan dan set nilai dalam HTML . Ini membuat .propsedikit lebih cepat dan mungkin lebih dapat diandalkan dalam beberapa konteks.

— Gerbus
sumber

1

setuju '.prop' akan mendapatkan path lengkap seperti: http: //www.../index.html sementara .attr hanya akan mendapatkan: 'index.html'

— DevWL

14

Setel hrefatribut dengan

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

dan membacanya menggunakan

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

Di mana "selector" adalah pemilih jQuery yang valid untuk <a>elemen Anda (".myClass" atau "#myId" untuk memberi nama yang paling sederhana).

Semoga ini membantu !

— Valentin Flachsel
sumber

Saya menggunakan ini untuk mendapatkan href. alert ($ ("# publish-link"). attr ("href")); Dan itu memberi saya peringatan "tidak terdefinisi".

— gautamlakum

@ lakum4stackof Anda kemungkinan besar mengeksekusi kode peringatan SEBELUM Anda mengatur hrefatribut Anda , dengan asumsi pemilih Anda sudah benar.

— Valentin Flachsel

2

coba: lansiran ($ (". publish-link"). attr ("href")); sebagai elemen Anda mungkin kelas daripada id. sebenarnya, mungkin menggunakan $ (ini) jika itu ada di dalam acara Anda

— jim tollan

2

Perbandingan uji kinerja kecil untuk tiga solusi:

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

Di sini Anda dapat melakukan tes sendiri https://jsperf.com/a-href-js-change

Kita dapat membaca nilai href dengan cara berikut

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

Di sini Anda dapat melakukan tes sendiri https://jsperf.com/a-href-js-read

— Kamil Kiełczewski
sumber

Bagus! Anehnya, saya mendapatkan hasil yang berlawanan dari Anda, tetapi menarik untuk bisa menjalankannya sendiri.

— HoldOffHunger

@HoldOffHunger ya - sangat menarik - apa mesin, OS, dan browser Anda?

— Kamil Kiełczewski

1

FF59, Win10. Hasilnya tampaknya telah sedikit berubah lagi (mungkin itu tergantung pada # tab yang terbuka), tetapi sebagian besar masih sama: imgur.com/a/MLDnTWM Mesin: papan intel berusia 10 tahun (dp55wg), 3,1 GHz quad-core, 16gb 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
sumber

1

Jawaban hanya kode tidak membantu seperti jawaban yang memiliki kode kerja ditambah penjelasan yang bermanfaat. Dalam hal ini, ada baiknya menjelaskan jawaban ini kepada anak berusia 5 tahun.

— Somnath Muluk