Warum gibt Array [0] ein anderes Objekt zurück als array.first mit jQuery und warum kann ich .val() nicht verwenden?

Question

Ich wähle mit jQuery ein Array von Eingabeobjekten aus, und ich stoße auf ein interessantes Problem, wenn ich nach der Auswahl eines der Array-Elemente versuche, mehrere Methoden miteinander zu verketten. Kann mir jemand erklären, warum ich dieses Verhalten bekomme?

jQuery('.custom-size').first().find('input:hidden') 
returns => 

[<input id=​"custom_order_custom_sizes_attributes_0_size_id" name=​"custom_order[custom_sizes_attributes]​[0]​[size_id]​" type=​"hidden" value=​"138">​ 
, 
<input name=​"custom_order[custom_sizes_attributes]​[0]​[_destroy]​" type=​"hidden" value=​"0">​ 
] 

Wenn ich eines der Elemente auswählen mit jQuery .first() oder .last() und dann .val() anrufe, bekomme ich den Erwartungswert von "138".

Wenn ich versuche, eine Position in dem Array zu verwenden, kann ich das Element des Arrays zurück:

var input = jQuery('.custom-size').first().find('input:hidden')[1] 
returns => 
<input name=​"custom_order[custom_sizes_attributes]​[0]​[_destroy]​" type=​"hidden" value=​"0"> 

Ich kann jedoch nicht .val() auf diesem Objekt aufrufen. Ich erhalte stattdessen diese Fehlermeldung:

TypeError: Object #<HTMLInputElement> has no method 'val' 

I .slice(x,y) kann das einzelne Element zurück, aber dies scheint ziemlich dumm. Was vermisse ich hier.

Answer 1

der folgende Code:

$(".something")[0] 

erhält ein einzelnes DOM-Element aus dem jQuery set. Dieser Code macht das gleiche wie wenn Sie

document.getElementsByClassName("something")[0] 

Abgerufen DOM-Element zu tun haben nicht val() Methode, da es nicht ein jQuery-Objekt ist.

Um das erste jQuery-Objekt von jQuery-Set zu erhalten, können Sie entweder :eq() Wahlschalter (oder .eq() Methode) oder :first Wähler (oder .first()-Methode) verwenden:

$(".something:eq(0)"); // $(".something").eq(0); 
$(".something:first"); // $(".something").first(); 

Answer 2

Wenn Sie auf ein jQuery-Objekt mit Klammernotation und Index zugreifen, wird das rohe DOM-Element an diesem Index zurückgegeben. DOM-Elemente haben keine jQuery-Methoden.

.first, .last oder .eq auf der anderen Seite ein jQuery-Objekt zurückgeben. Verwenden Sie $(...).eq(n), um ein jQuery-Objekt an einem bestimmten Index n abzurufen.

Answer 3

Die systemeigene Position nach Index ([1]) gibt das angegebene DOM-Element zurück.
jQuery-Funktionen wie .first() geben ein jQuery-Objekt zurück (ziemlich viele DOM-Elemente in einer jQuery-Oberfläche), die diese anderen Funktionen haben.