jQuery: eq () vs get ()

98

Eu sou novo no jQuery e estou me perguntando qual é a diferença entre jQuery get()e eq()funções. Posso entender mal o queget() função faz, mas achei estranho não poder chamar uma função no retornado no elemento retornado na mesma linha.

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

//Works
$("h2").eq(0).fadeIn("slow");
jquery jquery-selectors contactmatt
fonte
1
possível duplicata da diferença entre get () e eq () em jquery
PeeHaa
Possível duplicata de Qual é a diferença entre get () e eq () em jquery?
xhienne,

Respostas:

194

.get()e .eq()ambos retornam um único "elemento" de um array de objetos jQuery, mas retornam o único elemento em diferentes formas.

.eq() retorna-o como um objeto jQuery, o que significa que o elemento DOM é empacotado no wrapper jQuery, o que significa que ele aceita funções jQuery.

.get()retorna uma matriz de elementos DOM brutos. Você pode manipular cada um deles acessando seus atributos e invocando suas funções como faria em um elemento DOM bruto. Mas ele perde sua identidade como um objeto embrulhado em jQuery, portanto, uma função jQuery como .fadeInnão funcionará.

Steven
fonte
8
.get () retorna um array, .get (index) retorna o único elemento no índice do array.
Mohamed Fasil de
16

get()retorna um elemento DOM enquanto :eq()e eq()retorna um elemento jQuery. Como os elementos DOM não têm método, fadeIn()ele falha .

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

Descrição: recupera os elementos DOM correspondidos pelo objeto jQuery.

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

Descrição: Selecione o elemento no índice n dentro do conjunto combinado.

caçador
fonte
12

get(0)(docs) retorna o primeiro elemento DOM no conjunto.

eq(0)(docs) retorna o primeiro elemento DOM no conjunto, envolvido em um objeto jQuery.

É por isso .fadeIn("slow");que não funciona quando você faz .get(0). Um elemento DOM não tem um fadeIn()método, mas um objeto jQuery tem.

user113716
fonte
6

Para desenvolver outras respostas:

$('h2').get(0) === $('h2').eq(0)[0]  //true
$( $('h2').get(0) ) === $('h2').eq(0)  //true
qwertymk
fonte
1
O primeiro está correto. O segundo não é. Esses 2 objetos não são iguais
Royi Namir
5

eq(i)recupera o iº membro no conjunto do receptor como um jQueryobjeto, enquantoget(i) retorna o membro na i-ésima posição como um elemento DOM.

O motivo pelo qual isso não funciona:

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

É porque o h2elemento DOM não tem um método chamadofadeIn .

Você deve usar eq(0)aqui.

Jacob Relkin
fonte
0

Estou dando um exemplo que explica os pontos dados por outros aqui. considere o seguinte código

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

e o código js correspondente,

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

Isso é o que você vai 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]

O primeiro é um objeto DOM, enquanto o último é um objeto empacotado Jquery onde você pode chamar métodos Jquery

chuva de ideias
fonte
0

O método jQuery eq () seleciona um elemento HTML com um número de índice específico.

Aqui está um exemplo disso

<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
"encontra o segundo div" => não eq(2)retorna o terceiro div?
xhienne,
0

As respostas acima foram explicadas de forma específica e correta. Eu quero adicionar alguns pontos aqui que podem ajudar no uso de get().

  1. Se você não passar um argumento para .get(), ele retornará um Array dos elementos DOM.

  2. Se você tem um objeto DOM usando get(), como var s = $("#id").get(0) você pode transformá-lo de volta em objeto jQuery simplesmente usando isso,$(s)

  3. Você pode usar $obj[i]como uma forma alternativa se não quiser usar $obj.get(i), veja abaixo,

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

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