jQuery: eq () vs get ()

98

Jestem nowy w jQuery i zastanawiam się, jaka jest różnica między jQuery get()a eq()funkcjami. Mogę źle zrozumieć, co get()robi funkcja, ale pomyślałem, że to dziwne, że nie mogłem wywołać funkcji w zwracanym elemencie w tym samym wierszu.

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

//Works
$("h2").eq(0).fadeIn("slow");
jquery jquery-selectors contactmatt
źródło
1
możliwy duplikat różnicy między get () i eq () w jquery
PeeHaa
Możliwy duplikat Jaka jest różnica między get () i eq () w jquery?
xhienne

Odpowiedzi:

194

.get()i .eq()oba zwracają pojedynczy „element” z tablicy obiektów jQuery, ale zwracają pojedynczy element w różnych formach.

.eq() zwraca go jako obiekt jQuery, co oznacza, że ​​element DOM jest opakowany w opakowanie jQuery, co oznacza, że ​​akceptuje funkcje jQuery.

.get()zwraca tablicę surowych elementów DOM. Możesz manipulować każdym z nich, uzyskując dostęp do jego atrybutów i wywołując jego funkcje, tak jak w przypadku surowego elementu DOM. Ale traci swoją tożsamość jako obiekt opakowany w jQuery, więc funkcja jQuery taka jak .fadeInnie będzie działać.

Steven
źródło
8
.get () zwraca tablicę, .get (indeks) zwraca pojedynczy element pod indeksem z tablicy.
Mohamed Fasil
16

get()zwraca element DOM, podczas gdy :eq()i eq()zwraca element jQuery. Ponieważ elementy DOM nie mają metody fadeIn(), zawodzi .

http://api.jquery.com/get/

Opis: pobierz elementy DOM dopasowane przez obiekt jQuery.

http://api.jquery.com/eq-selector/

Opis: Wybierz element o indeksie n w dopasowanym zestawie.

myśliwy
źródło
12

get(0)(docs) zwraca pierwszy element DOM w zestawie.

eq(0)(docs) zwraca pierwszy element DOM w zestawie, opakowany w obiekt jQuery.

Dlatego .fadeIn("slow");nie działa, kiedy robisz .get(0). Element DOM nie ma fadeIn()metody, ale obiekt jQuery ma.

user113716
źródło
6

Aby skorzystać z innych odpowiedzi:

$('h2').get(0) === $('h2').eq(0)[0]  //true
$( $('h2').get(0) ) === $('h2').eq(0)  //true
qwertymk
źródło
1
Pierwsza jest poprawna. Drugi to nie. Te 2 obiekty to nie to samo
Royi Namir
5

eq(i)pobiera i-ty element z zestawu odbiorcy jako jQueryobiekt, podczas gdy get(i)zwraca element na i-tym miejscu jako element DOM.

Powód, dla którego to nie działa:

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

Dzieje się tak, ponieważ h2element DOM nie ma metody o nazwie fadeIn.

Zamiast tego powinieneś użyć eq(0)tutaj.

Jacob Relkin
źródło
0

Podaję przykład, który wyjaśnia punkty podane przez innych tutaj. rozważ następujący kod

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

i odpowiedni kod js,

$(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);
    });

Oto, co zobaczysz

 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]

Pierwszy to obiekt DOM, podczas gdy drugi to obiekt opakowany w Jquery, w którym można wywołać metody Jquery

burza mózgów
źródło
0

Metoda jQuery eq () wybiera element HTML o określonym numerze indeksu.

Oto przykład

<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.

Źródło: http://www.snoopcode.com/JQuery/jquery-eq-selector

Prabhakar Undurthi
źródło
"znajduje drugi element div" => nie eq(2)zwraca trzeciego elementu div?
xhienne
0

Odpowiedzi powyżej wyjaśniły szczegółowo i poprawnie. Chcę tutaj dodać kilka punktów, które mogą pomóc w korzystaniu z get().

  1. Jeśli nie przekażesz argumentu do .get(), zwróci on tablicę elementów DOM.

  2. Jeśli masz obiekt DOM za pomocą get(), tak jak var s = $("#id").get(0) możesz zmienić go z powrotem w obiekt jQuery po prostu używając tego,$(s)

  3. Możesz użyć $obj[i]alternatywnego sposobu, jeśli nie chcesz go używać $obj.get(i), patrz poniżej,

    var $obj = $("#ul li");
var obj1 = $obj.get(1);
var obj2 = $obj[1];

//true
return obj2===obj1;
SkuraZZ
źródło