jQuery: eq () vs get ()


98

Saya baru mengenal jQuery, dan saya bertanya-tanya apa perbedaan antara jQuery get()dan eq()fungsi. Saya mungkin salah paham apa get()fungsinya, tapi saya pikir itu aneh bahwa saya tidak bisa memanggil fungsi yang dikembalikan pada elemen yang dikembalikan di baris yang sama.

//Doesn't work
I.e.  $("h2").get(0).fadeIn("slow");

//Works
$("h2").eq(0).fadeIn("slow");


Jawaban:


194

.get()dan .eq()keduanya mengembalikan satu "elemen" dari larik objek jQuery, tetapi mereka mengembalikan satu elemen dalam bentuk yang berbeda.

.eq() mengembalikannya sebagai objek jQuery, yang berarti elemen DOM dibungkus dalam pembungkus jQuery, yang berarti menerima fungsi jQuery.

.get()mengembalikan larik elemen DOM mentah. Anda dapat memanipulasi masing-masing dengan mengakses atributnya dan menjalankan fungsinya seperti yang Anda lakukan pada elemen DOM mentah. Tapi itu kehilangan identitasnya sebagai objek yang dibungkus jQuery, jadi fungsi jQuery .fadeIntidak akan berfungsi.


8
.get () mengembalikan sebuah array, .get (index) mengembalikan elemen tunggal pada indeks dari array.
Mohamed Fasil


12

get(0)(docs) mengembalikan elemen DOM pertama dalam set.

eq(0)(docs) mengembalikan elemen DOM pertama dalam set, dibungkus dalam objek jQuery.

Itulah mengapa .fadeIn("slow");tidak berhasil saat Anda melakukannya .get(0). Elemen DOM tidak memiliki fadeIn()metode, tetapi objek jQuery memilikinya.


6

Untuk mengembangkan jawaban lain:

$('h2').get(0) === $('h2').eq(0)[0]  //true
$( $('h2').get(0) ) === $('h2').eq(0)  //true

1
Yang pertama benar. Yang kedua tidak. 2 objek itu tidak sama
Royi Namir

5

eq(i)mengambil anggota ke-i di set penerima sebagai jQueryobjek, sementara get(i)mengembalikan anggota di posisi ke-i sebagai elemen DOM.

Alasan mengapa ini tidak berhasil:

$("h2").get(0).fadeIn("slow");

Karena h2elemen DOM tidak memiliki metode yang dipanggil fadeIn.

Anda harus menggunakan di eq(0)sini sebagai gantinya.


0

Saya memberikan contoh yang menjelaskan poin-poin yang diberikan oleh orang lain di sini. perhatikan kode berikut

<div id="example">
    Some text
    <div>Another div</div>
    <!--A comment-->
</div>

dan kode js yang sesuai,

$(document).ready(function() {
    var div = $("#example").get(0);
    console.log(typeof(div));
    console.log(div);
    console.log("XXXXXXXXX");
    var div_eq=$('#example').eq(0);
    console.log(typeof(div_eq));
    console.log(div_eq);
    });

Inilah yang akan Anda lihat

 object
excercise1.js (line 5)
<div id="example">
excercise1.js (line 6)
XXXXXXXXX
excercise1.js (line 7)
object
excercise1.js (line 9)
Object[div#example]

Yang pertama adalah objek DOM sedangkan yang terakhir adalah objek yang dibungkus Jquery tempat Anda dapat memanggil metode Jquery


0

jQuery eq () metode memilih elemen HTML dengan nomor indeks tertentu.

Ini adalah contohnya

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

$( "body" ).find( "div" ).eq( 2 ).addClass( "red" );
// it finds the second div in the html body and change it to red color.

Sumber: http://www.snoopcode.com/JQuery/jquery-eq-selector


"ia menemukan div kedua" => tidak eq(2)mengembalikan div ketiga?
xhienne

0

Jawaban di atas sudah dijelaskan secara spesifik dan benar. Saya ingin menambahkan beberapa poin di sini yang mungkin bisa membantu untuk penggunaan get().

  1. Jika Anda tidak meneruskan argumen ke .get(), itu akan mengembalikan Array dari elemen DOM.

  2. Jika Anda menggunakan objek DOM get(), seperti var s = $("#id").get(0) Anda dapat mengubahnya kembali menjadi objek jQuery hanya dengan menggunakan ini,$(s)

  3. Anda dapat menggunakan $obj[i]sebagai cara alternatif jika Anda tidak ingin menggunakan $obj.get(i), lihat di bawah,

    var $obj = $("#ul li");
    var obj1 = $obj.get(1);
    var obj2 = $obj[1];
    
    //true
    return obj2===obj1;
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.