2011-01-17 10 views
90

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

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

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

posible duplicado de [diferencia entre get() y eq() en jquery] (http://stackoverflow.com/questions/4662301/difference-between-get-and-eq-in-jquery) – PeeHaa

Respuesta

174

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

.eq() lo devuelve como un objeto jQuery, lo que significa que el elemento DOM está envuelto en el envoltorio 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 con un elemento DOM sin procesar. Pero pierde su identidad como un objeto envuelto jQuery, por lo que una función jQuery como .fadeIn no funcionará.

+0

¡Gracias por compartir esto! – blackhawk

+7

.get() devuelve una matriz, .get (índice) devuelve el elemento único en el índice de la matriz. –

14

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

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

Descripción: recuperar los elementos DOM coincidentes por el objeto jQuery.

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

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

5

eq(i) recupera el miembro i-ésima en el conjunto del receptor como un objeto jQuery, mientras get(i) devuelve el miembro en la posición i-ésima como un elemento DOM.

La razón por la que esto no funciona:

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

es porque el elemento de h2 DOM no tiene un método llamado fadeIn.

En su lugar, debe usar eq(0).

11

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

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

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

6

para construir sobre las otras respuestas:

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

El primero es correcto. El segundo no es. Esos 2 objetos no son lo mismo –

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 correspondiente 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); 
    }); 

Esto es lo que se verá

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 último es un Jquery -objeto envuelto donde puede llamar a los métodos de Jquery

0

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

Aquí es un ejemplo de que

<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

0

respuestas anteriores han explicado especificamente y correctamente. Quiero agregar algunos puntos aquí que pueden ayudar con el uso de get().

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

  2. Si tienes un objeto DOM utilizando get(), como var s = $("#id").get(0) puede convertir de nuevo en objeto jQuery simplemente usando esto, $(s)

  3. Puede utilizar $obj[i] como una forma alternativa si no lo hace desee utilizar $obj.get(i), véase más adelante,

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