array [0]がjQueryを使用してarray.firstとは別のオブジェクトを返すのはなぜですか、なぜ私は.val（）を使用できませんか？

Question

私はjQueryを使って入力オブジェクトの配列を選択していますが、配列要素の1つを選択した後に複数のメソッドを連鎖しようとすると面白い問題に遭遇しています。誰も私にこの現象をなぜ私に説明することができますか？

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">​ 
] 

私はjQueryの.first()または.last()を使用して要素の一つを選択し、.val()を呼び出す場合、私は"138"の期待値を取得します。私は、配列内の位置を使用しようとすると、私は配列の要素を返すことができ

：

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

は、しかし私は、このオブジェクトに.val()を呼び出すことはできません。代わりに、私は、このエラーメッセージが出ます：

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

を私は単一の要素を返すために.slice(x,y)を使用することができますが、これはむしろ愚かなようです。私はここで何が欠けているのですか？

Answer 1

次のコード

$(".something")[0] 

はjQueryのセットから単一DOM要素を取得します。このコードは、jQueryオブジェクトではありませんので、あなたは、val()メソッドを持っていない

document.getElementsByClassName("something")[0] 

取り出されるDOM要素を行うかのように同じことを。

jQueryのセットから第jQueryオブジェクトを得るために、あなたは:eq()セレクタ（又は.eq()法）のいずれかを使用することができる、または:firstセレクタ（又は.first()法）：

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

Answer 2

ブラケット表記とインデックスを使用してjQueryオブジェクトにアクセスすると、そのインデックスに生のDOM要素が戻されます。 DOM要素にはjQueryメソッドはありません。

.first,または.eq一方、jQueryオブジェクトを返します。特定のインデックスnでjQueryオブジェクトを取得するには、$(...).eq(n)を使用します。

Answer 3

インデックスによるネイティブの場所（[1]）は、指定されたDOM要素を返します。
.first()のようなjQuery関数は、他の関数を持つjQueryオブジェクト（jQueryスキンでラップされたかなりのDOM要素）を返します。