Cara mendapatkan Elemen DOM dari Pemilih JQuery


179

Saya mengalami kesulitan menemukan untuk mendapatkan DOMElement sebenarnya dari pemilih jquery. Kode sampel:

<input type="checkbox" id="bob" />
  var checkbox = $("#bob").click(function() { //some code  } )

dan di bagian kode lain saya mencoba menentukan nilai yang dicentang dari kotak centang.

  if ( checkbox.eq(0).SomeMethodToGetARealDomElement().checked )
    //do something.

Dan tolong, saya tidak ingin melakukan:

  if ( checkbox.eq(0).is(":checked"))
    //do something

Itu membuat saya berkeliling kotak centang, tapi di lain waktu saya membutuhkan DOMElement nyata.


4
Satu kasus di mana ini mungkin diperlukan: di Knockout.js fungsi applyBindingsmengharapkan simpul DOM bukan pemilih jQuery. Pertanyaan ini (dan jawabannya) adalah persis apa yang dibutuhkan.
Muhammad Alkarouri

Jawaban:


264

Anda dapat mengakses elemen DOM mentah dengan:

$("table").get(0);

atau lebih sederhana:

$("table")[0];

Sebenarnya tidak banyak yang Anda butuhkan untuk ini (dalam pengalaman saya). Ambil contoh kotak centang Anda:

$(":checkbox").click(function() {
  if ($(this).is(":checked")) {
    // do stuff
  }
});

lebih "jquery'ish" dan (imho) lebih ringkas. Bagaimana jika Anda ingin memberi nomor pada mereka?

$(":checkbox").each(function(i, elem) {
  $(elem).data("index", i);
});
$(":checkbox").click(function() {
  if ($(this).is(":checked") && $(this).data("index") == 0) {
    // do stuff
  }
});

Beberapa fitur ini juga membantu menutupi perbedaan di browser juga. Beberapa atribut dapat berbeda. Contoh klasiknya adalah panggilan AJAX. Untuk melakukan ini dengan benar dalam Javascript mentah memiliki sekitar 7 kasus fallback untuk XmlHttpRequest.


1
Terima kasih, tetapi metode get masih mengembalikan elemen jquery, bukan elemen dom. Kalau tidak, panggilan properti .checked akan berfungsi.
BillRob

Coba $('a').get(0).nodeType==1di Firebug di halaman ini, apakah itu mengevaluasi benar atau gagal?
meder omuraliev

@ BillRob jika get () tidak mengembalikan elemen DOM, ada sesuatu yang salah. Lihat dokumen di sini: docs.jquery.com/Core/get#index
Sixten Otto

$('<input type=checkbox>').appendTo('body').get(0).checked
meder omuraliev

5
Apa gunanya menggunakan jQuery jika Anda akan secara eksplisit menggunakan properti DOM? Bukankah lebih baik memiliki kode konsisten yang tahan kesalahan terhadap kemungkinan TypeErrors? Beberapa tahun yang lalu saya menjadi ECMAScripter elitis dan menghindari kerangka kerja tetapi semakin saya belajar tentang inkonsistensi saya akhirnya lebih mengandalkan. Mesin peramban hanya menjadi lebih cepat dan lebih cepat, kecuali jika kecepatannya terlihat Anda tidak perlu khawatir tentang hal ini. Inti dari menggunakan suatu kerangka kerja adalah untuk memiliki kode yang dapat diselesaikan secara konsisten dan menyelesaikan banyak masalah, tidak melakukan hal-hal secepat mungkin.
meder omuraliev

7

Sunting: sepertinya saya salah dengan menganggap Anda tidak bisa mendapatkan elemen. Seperti yang orang lain posting di sini, Anda bisa mendapatkannya dengan:

$('#element').get(0);

Saya telah memverifikasi ini benar-benar mengembalikan elemen DOM yang cocok.


2
Mengulangi diri saya sendiri, tapi sekali lagi ... tidak di semua browser. Gagal di IE7 dan sebelumnya.
Slavo

6

Saya perlu mendapatkan elemen sebagai string.

jQuery("#bob").get(0).outerHTML;

Yang akan memberi Anda sesuatu seperti:

<input type="text" id="bob" value="hello world" />

... sebagai string daripada elemen DOM.


1

Jika Anda perlu berinteraksi langsung dengan elemen DOM, mengapa tidak menggunakan saja document.getElementByIdsejak itu, jika Anda mencoba berinteraksi dengan elemen tertentu, Anda mungkin akan tahu id, dengan asumsi bahwa nama kelas hanya pada satu elemen atau beberapa opsi lain cenderung menjadi berisiko.

Tapi, saya cenderung setuju dengan yang lain, bahwa dalam kebanyakan kasus Anda harus belajar untuk melakukan apa yang Anda butuhkan menggunakan apa yang jQuery berikan kepada Anda, karena sangat fleksibel.

UPDATE: Berdasarkan pada komentar: Berikut adalah posting dengan penjelasan yang bagus: http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

$(this).attr("checked") ? $(this).val() : 0

Ini akan mengembalikan nilai jika dicentang, atau 0 jika tidak.

$(this).val() baru saja mencapai dom dan mendapatkan atribut "nilai" elemen, apakah itu diperiksa atau tidak.


2
Saya bisa menggunakan document.getElementById atau metode $ get ajax MS. Karena MS mendukung jquery, saya mencoba untuk mematahkan kepercayaan saya pada ms ajax javascript dan belajar jquery. Tampaknya sepenuhnya kontra-intuitif bahwa jquery akan mengubah perilaku metode kotak centang .val (). Seperti setiap panggilan .val () lainnya mengembalikan bidang formulir posting. jQuery sangat bagus untuk dikerjakan sehingga membingungkan untuk mengubah metode val () dan berharap menemukan solusi cepat.
BillRob


2
Itu aneh James bahwa metode val () benar-benar .attr ("nilai"). Saya heran mengapa mereka memiliki dua metode berbeda untuk itu. Bagi saya .val () adalah nilai dari kolom isian formulir.
BillRob

2
@ BillRob - jQuery hanya menyederhanakan, dan standarisasi, cara mendapatkan nilai, daripada Anda harus pergi ke elemen aktual dan melakukannya sendiri.
James Black

Kadang-kadang Anda memerlukan pemilih kompleks dengan ID dan skenario orangtua-anak dan Anda bisa mendapatkannya melalui jQuery dengan satu baris kode, tetapi akan membutuhkan waktu sehari untuk menggunakan document.getElementById. Saya setuju bahwa menggabungkan pustaka adalah ide yang buruk, tapi itu kadang terjadi dan tugas mendapatkan elemen DOM dari objek jquery hanya sulit, terutama dengan .get (0) yang tidak memiliki kompatibilitas browser.
Slavo
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.