web-dev-qa-db-fra.com

jQuery: eq () vs get ()

Je suis nouveau dans jQuery et je me demande quelle est la différence entre les fonctions get() et eq() de jQuery. Je ne comprends peut-être pas ce que fait la fonction get(), mais je trouvais étrange que je ne puisse pas appeler une fonction sur l'élément retourné sur l'élément renvoyé sur la même ligne.

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

//Works
$("h2").eq(0).fadeIn("slow");
jqueryjquery-selectors
93
contactmatt

.get() et .eq() renvoient tous deux un seul "élément" à partir d'un tableau d'objets jQuery, mais ils renvoient l'élément unique sous différentes formes.

.eq() le renvoie sous forme d'objet jQuery, ce qui signifie que l'élément DOM est encapsulé dans l'encapsuleur jQuery, ce qui signifie qu'il accepte les fonctions jQuery.

.get() retourne un tableau d'éléments DOM bruts. Vous pouvez manipuler chacun d'eux en accédant à ses attributs et en appelant ses fonctions, comme vous le feriez avec un élément DOM brut. Mais il perd son identité d'objet enveloppé dans jQuery. Par conséquent, une fonction jQuery telle que .fadeIn ne fonctionnera pas.

182
Steven Xu

get() renvoie un élément DOM alors que :eq() et eq() renvoient un élément jQuery. Comme les éléments DOM n’ont pas de méthode fadeIn(), il échoue.

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

Description: Récupère les éléments DOM mis en correspondance par l'objet jQuery.

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

Description: Sélectionnez l'élément à l'indice n dans l'ensemble correspondant.

15
hunter

get(0)(docs) renvoie le premier élément DOM de l'ensemble.

eq(0)(docs) renvoie le premier élément DOM de l'ensemble, entouré d'un objet jQuery.

C'est pourquoi .fadeIn("slow"); ne fonctionne pas lorsque vous faites .get(0). Un élément DOM n'a pas de méthode fadeIn(), contrairement à un objet jQuery.

11
user113716

Pour construire sur les autres réponses:

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

eq(i) récupère le ième membre du jeu du destinataire sous forme d'objet jQuery, tandis que get(i) renvoie le membre situé à la iième position en tant qu'élément DOM.

La raison pour laquelle cela ne fonctionne pas:

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

C’est parce que l’élément DOM h2 n’a pas de méthode appelée fadeIn.

Vous devriez utiliser eq(0) ici à la place.

5
Jacob Relkin

la méthode jQuery eq () sélectionne un élément HTML avec un numéro d'index spécifique.

Voici un exemple de cela

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

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

0
Prabhakar

Les réponses ci-dessus ont été expliquées précisément et correctement. Je veux ajouter ici quelques points qui pourraient aider à utiliser get().

  1. Si vous ne transmettez pas d'argument à .get(), il renverra un tableau des éléments DOM.

  2. Si vous avez un objet DOM utilisant get(), comme var s = $("#id").get(0)vous pouvez le reconvertir en objet jQuery simplement en utilisant ceci, $(s)

  3. Vous pouvez utiliser $obj[i] comme alternative si vous ne voulez pas utiliser $obj.get(i), voir ci-dessous,

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

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

Je donne un exemple qui explique les points donnés par d’autres ici . Considérons le code suivant

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

et le code js correspondant,

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

C'est ce que vous allez voir

 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]

Le premier est un objet DOM tandis que le dernier est un objet enveloppé par Jquery dans lequel vous pouvez appeler des méthodes Jquery. 

0
brain storm