jQuery: eq () vs get ()

98

Soy nuevo en jQuery y me pregunto cuál es la diferencia entre las funciones get()y de jQuery eq(). Puede que no entienda lo que hace la get()función, pero me pareció extraño que no pudiera llamar a una función en el elemento devuelto en la misma línea.

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

//Works
$("h2").eq(0).fadeIn("slow");
jquery jquery-selectors contactmatt
fuente
1
posible duplicado de la diferencia entre get () y eq () en jquery
PeeHaa
Posible duplicado de ¿Cuál es la diferencia entre get () y eq () en jquery?
xhienne

Respuestas:

194

.get()y .eq()ambos devuelven un solo "elemento" de una matriz de objetos jQuery, pero devuelven el elemento único en diferentes formas.

.eq() lo devuelve como un objeto jQuery, lo que significa que el elemento DOM está envuelto en el contenedor jQuery, lo que significa que acepta funciones jQuery.

.get()devuelve una matriz de elementos DOM sin procesar. Puede manipular cada uno de ellos accediendo a sus atributos e invocando sus funciones como lo haría en un elemento DOM sin formato. Pero pierde su identidad como un objeto envuelto en jQuery, por lo que una función de jQuery como .fadeInno funcionará.

Steven
fuente
8
.get () devuelve una matriz, .get (índice) devuelve el elemento único en el índice de la matriz.
Mohamed Fasil
16

get()devuelve un elemento DOM mientras que :eq()y eq()devuelve un elemento jQuery. Dado que los elementos DOM no tienen método fadeIn(), falla .

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

Descripción: recupera los elementos DOM que coinciden con el objeto jQuery.

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

Descripción: seleccione el elemento en el índice n dentro del conjunto emparejado.

cazador
fuente
12

get(0)(docs) devuelve el primer elemento DOM del conjunto.

eq(0)(docs) devuelve el primer elemento DOM del conjunto, envuelto en un objeto jQuery.

Por eso .fadeIn("slow");no funciona cuando tú lo haces .get(0). Un elemento DOM no tiene un fadeIn()método, pero un objeto jQuery sí.

usuario113716
fuente
6

Para aprovechar las otras respuestas:

$('h2').get(0) === $('h2').eq(0)[0]  //true
$( $('h2').get(0) ) === $('h2').eq(0)  //true
qwertymk
fuente
1
El primero es correcto. El segundo no lo es Esos 2 objetos no son iguales
Royi Namir
5

eq(i)recupera el miembro i en el conjunto del receptor como un jQueryobjeto, mientras que get(i)devuelve el miembro en la posición i como un elemento DOM.

La razón por la que esto no funciona:

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

Es porque el h2elemento DOM no tiene un método llamado fadeIn.

Deberías usar eq(0)aquí en su lugar.

Jacob Relkin
fuente
0

Estoy dando un ejemplo que explica los puntos dados por otros aquí. considere el siguiente código

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

y el código js correspondiente,

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

esto es lo que verás

 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]

El primero es un objeto DOM, mientras que el segundo es un objeto envuelto en Jquery donde puede llamar a métodos Jquery

tormenta de ideas
fuente
0

El método jQuery eq () selecciona un elemento HTML con un número de índice específico.

Aquí hay un ejemplo de eso

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

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

Prabhakar Undurthi
fuente
"encuentra el segundo div" => ¿no eq(2)devuelve el tercer div?
xhienne
0

Las respuestas anteriores se han explicado de manera específica y correcta. Quiero agregar algunos puntos aquí que podrían ayudar con el uso de get().

  1. Si no pasa un argumento a .get(), devolverá una matriz de los elementos DOM.

  2. Si tiene un objeto DOM usando get(), como var s = $("#id").get(0) si pudiera convertirlo de nuevo en un objeto jQuery simplemente usando esto,$(s)

  3. Puede usarlo $obj[i]como una forma alternativa si no desea usar $obj.get(i), vea a continuación,

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

//true
return obj2===obj1;
SkuraZZ
fuente