jQuery: eq () vs get ()

98

Sono nuovo in jQuery e mi chiedo quale sia la differenza tra jQuery get()e le eq()funzioni. Potrei fraintendere ciò che fa la get()funzione, ma ho pensato che fosse strano non poter chiamare una funzione sull'elemento restituito sulla stessa riga.

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

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

jquery jquery-selectors

— contactmatt
fonte

1

possibile duplicato della differenza tra get () ed eq () in jquery

— PeeHaa

Possibile duplicato di Qual è la differenza tra get () ed eq () in jquery?

— xhienne

194

.get()ed .eq()entrambi restituiscono un singolo "elemento" da un array di oggetti jQuery, ma restituiscono il singolo elemento in forme diverse.

.eq() lo restituisce come oggetto jQuery, il che significa che l'elemento DOM è avvolto nel wrapper jQuery, il che significa che accetta le funzioni jQuery.

.get()restituisce un array di elementi DOM grezzi. Puoi manipolare ciascuno di essi accedendo ai suoi attributi e invocando le sue funzioni come faresti su un elemento DOM grezzo. Ma perde la sua identità come oggetto avvolto in jQuery, quindi una funzione jQuery come .fadeInnon funzionerà.

— Steven
fonte

8

.get () restituisce un array, .get (index) restituisce il singolo elemento all'indice dell'array.

— Mohamed Fasil

16

get()restituisce un elemento DOM mentre :eq()e eq()restituisce un elemento jQuery. Poiché gli elementi DOM non hanno alcun metodo fadeIn(), fallisce .

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

Descrizione: recupera gli elementi DOM corrispondenti all'oggetto jQuery.

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

Descrizione: seleziona l'elemento all'indice n all'interno dell'insieme corrispondente.

— cacciatore
fonte

12

get(0)^(docs) restituisce il primo elemento DOM nel set.

eq(0)^(docs) restituisce il primo elemento DOM nel set, racchiuso in un oggetto jQuery.

Ecco perché .fadeIn("slow");non funziona quando lo fai tu .get(0). Un elemento DOM non ha un fadeIn()metodo, ma un oggetto jQuery sì .

— user113716
fonte

6

Per costruire sulle altre risposte:

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

— qwertymk
fonte

1

Il primo è corretto. Il secondo no. Quei 2 oggetti non sono gli stessi

— Royi Namir

5

eq(i)recupera il i-esimo membro nell'insieme del destinatario come jQueryoggetto, mentre get(i)restituisce il membro nella i-esima posizione come elemento DOM.

Il motivo per cui questo non funziona:

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

È perché l' h2elemento DOM non ha un metodo chiamato fadeIn.

Dovresti usare eq(0)qui invece.

— Jacob Relkin
fonte

0

Faccio un esempio che spiega i punti forniti da altri qui. considera il codice seguente

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

e il codice js corrispondente,

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

Questo è quello che vedrai

 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]

Il primo è un oggetto DOM mentre il secondo è un oggetto avvolto in Jquery in cui è possibile chiamare metodi Jquery

— tempesta cerebrale
fonte

0

Il metodo jQuery eq () seleziona un elemento HTML con un numero di indice specifico.

Ecco un esempio di ciò

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

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

— Prabhakar Undurthi
fonte

"trova il secondo div" => non eq(2)restituisce il terzo div?

— xhienne

0

Le risposte sopra sono state spiegate in modo specifico e corretto. Vorrei aggiungere alcuni punti che potrebbero essere utili per l'uso di get().

Se non passi un argomento a .get(), restituirà un array di elementi DOM.
Se hai un oggetto DOM usando get(), come var s = $("#id").get(0) puoi trasformarlo di nuovo in oggetto jQuery semplicemente usando questo,$(s)

Puoi usare $obj[i]come un modo alternativo se non vuoi usare $obj.get(i), vedi sotto,

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

//true
return obj2===obj1;

— SkuraZZ
fonte