jQuery: eq () vs get ()

98

Ich bin neu in jQuery und frage mich, was der Unterschied zwischen jQuery get()und eq()Funktionen ist. Ich kann falsch verstehen, was die get()Funktion tut, aber ich fand es seltsam, dass ich keine Funktion für das zurückgegebene Element in derselben Zeile aufrufen konnte.

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

//Works
$("h2").eq(0).fadeIn("slow");
jquery jquery-selectors Kontaktmatt
quelle
1
Mögliches Duplikat der Differenz zwischen get () und eq () in jquery
PeeHaa
Mögliches Duplikat von Was ist der Unterschied zwischen get () und eq () in jquery?
Xhienne

Antworten:

194

.get()und .eq()beide geben ein einzelnes "Element" aus einem jQuery-Objektarray zurück, aber sie geben das einzelne Element in verschiedenen Formen zurück.

.eq() Gibt es als jQuery-Objekt zurück, dh das DOM-Element wird in den jQuery-Wrapper eingeschlossen, was bedeutet, dass es jQuery-Funktionen akzeptiert.

.get()Gibt ein Array von unformatierten DOM-Elementen zurück. Sie können jeden von ihnen manipulieren, indem Sie auf seine Attribute zugreifen und seine Funktionen wie bei einem unformatierten DOM-Element aufrufen. Es verliert jedoch seine Identität als in jQuery eingeschlossenes Objekt, sodass eine jQuery-Funktion wie .fadeIndiese nicht funktioniert.

Steven
quelle
8
.get () gibt ein Array zurück, .get (index) gibt das einzelne Element am Index aus dem Array zurück.
Mohamed Fasil
16

get()Gibt ein DOM-Element zurück, während :eq()und eq()ein jQuery-Element zurückgibt . Da DOM-Elemente keine Methode fadeIn()haben, schlägt dies fehl .

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

Beschreibung: Rufen Sie die DOM-Elemente ab, die mit dem jQuery-Objekt übereinstimmen.

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

Beschreibung: Wählen Sie das Element am Index n innerhalb der übereinstimmenden Menge aus.

Jäger
quelle
12

get(0)(docs) gibt das erste DOM-Element in der Menge zurück.

eq(0)(docs) gibt das erste DOM-Element in der Menge zurück, das in ein jQuery-Objekt eingeschlossen ist.

Deshalb .fadeIn("slow");funktioniert es nicht, wenn Sie es tun .get(0). Ein DOM-Element hat keine fadeIn()Methode, ein jQuery-Objekt jedoch.

user113716
quelle
6

Um auf den anderen Antworten aufzubauen:

$('h2').get(0) === $('h2').eq(0)[0]  //true
$( $('h2').get(0) ) === $('h2').eq(0)  //true
qwertymk
quelle
1
Der erste ist richtig. Das zweite ist nicht. Diese 2 Objekte sind nicht gleich
Royi Namir
5

eq(i)Ruft das i- te Element im Empfänger-Set als jQueryObjekt ab, während get(i)das Element an der i-ten Position als DOM-Element zurückgegeben wird.

Der Grund, warum dies nicht funktioniert:

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

Dies liegt daran, dass für das h2DOM-Element keine Methode aufgerufen wirdfadeIn .

Sie sollten eq(0)stattdessen hier verwenden.

Jacob Relkin
quelle
0

Ich gebe ein Beispiel, das die Punkte erklärt, die andere hier gegeben haben. Betrachten Sie den folgenden Code

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

und den entsprechenden js-Code,

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

Das werden Sie sehen

 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]

Das erste ist ein DOM-Objekt, während das zweite ein in Jquery eingeschlossenes Objekt ist, in dem Sie Jquery-Methoden aufrufen können

Brainstorming
quelle
0

Die Methode jQuery eq () wählt ein HTML-Element mit einer bestimmten Indexnummer aus.

Hier ist ein Beispiel dafür

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

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

Prabhakar Undurthi
quelle
"es findet das zweite div" => gibt eq(2)das dritte div nicht zurück?
Xhienne
0

Die obigen Antworten wurden spezifisch und richtig erklärt. Ich möchte hier einige Punkte hinzufügen, die für die Verwendung von hilfreich sein könnten get().

  1. Wenn Sie kein Argument an übergeben .get(), wird ein Array der DOM-Elemente zurückgegeben.

  2. Wenn Sie ein DOM-Objekt mit verwenden get(), var s = $("#id").get(0) können Sie es einfach wieder in ein jQuery-Objekt umwandeln.$(s)

  3. Sie können $obj[i]alternativ verwenden, wenn Sie nicht verwenden möchten $obj.get(i), siehe unten,

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

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