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

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

Jeśli nie przekażesz argumentu do .get(), zwróci on tablicę elementów DOM.
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)

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