jQuery: eq () vs get ()

98

Je suis nouveau sur jQuery et je me demande quelle est la différence entre jQuery get()et les eq()fonctions. Je peux mal comprendre ce que fait la get()fonction, mais j'ai trouvé étrange que je ne puisse pas appeler une fonction sur l'élément renvoyé dans la même ligne.

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

//Works
$("h2").eq(0).fadeIn("slow");
jquery jquery-selectors contactmatt
la source
1
duplication possible de la différence entre get () et eq () dans jquery
PeeHaa
Double possible de Quelle est la différence entre get () et eq () dans jquery?
xhienne

Réponses:

194

.get()et les .eq()deux renvoient 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 comme un objet jQuery, ce qui signifie que l'élément DOM est encapsulé dans le wrapper jQuery, ce qui signifie qu'il accepte les fonctions jQuery.

.get()renvoie un tableau d'éléments DOM bruts. Vous pouvez manipuler chacun d'eux en accédant à ses attributs et en invoquant ses fonctions comme vous le feriez sur un élément DOM brut. Mais il perd son identité en tant qu'objet enveloppé de jQuery, donc une fonction jQuery comme .fadeInne fonctionnera pas.

Steven
la source
8
.get () renvoie un tableau, .get (index) renvoie l'élément unique à l'index du tableau.
Mohamed Fasil
16

get()renvoie un élément DOM tandis que :eq()et eq()renvoie un élément jQuery. Puisque les éléments DOM n'ont pas de méthode, fadeIn()cela échoue .

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

Description: récupérez les éléments DOM correspondant à l'objet jQuery.

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

Description: sélectionnez l'élément à l'index n dans l'ensemble correspondant.

chasseur
la source
12

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

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

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

utilisateur113716
la source
6

Pour construire sur les autres réponses:

$('h2').get(0) === $('h2').eq(0)[0]  //true
$( $('h2').get(0) ) === $('h2').eq(0)  //true
qwertymk
la source
1
Le premier est correct. Le deuxième n'est pas. Ces 2 objets ne sont pas les mêmes
Royi Namir
5

eq(i)récupère le ième membre dans l'ensemble du récepteur en tant jQueryqu'objet, tandis que get(i)renvoie le membre à la iè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' h2élément DOM n'a pas de méthode appelée fadeIn.

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

Jacob Relkin
la source
0

Je donne un exemple qui explique les points donnés par d'autres ici. considérez 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 tu verras

 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 second est un objet enveloppé de Jquery où vous pouvez appeler des méthodes Jquery

idée de génie
la source
0

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

Prabhakar Undurthi
la source
"il trouve le deuxième div" => ne eq(2)renvoie pas le troisième div?
xhienne
0

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

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

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

  3. Vous pouvez utiliser $obj[i]comme alternative si vous ne souhaitez 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;
SkuraZZ
la source