Why is array[0] returning a different object than array.first using jQuery and why can't I use .val( )?
<p>I'm selecting an array of input objects using jQuery and I'm running into an interesting problem when I try to chain together multiple methods after selecting one of the array elements. Can anyone explain to me why I get this behavior?</p>

<pre><code>jQuery('.custom-size').first().find('input:hidden')
returns =&gt;  

[&lt;input id=​"custom_order_custom_sizes_attributes_0_size_id" name=​"custom_order[custom_sizes_attributes]​[0]​[size_id]​" type=​"hidden" value=​"138"&gt;​
, 
&lt;input name=​"custom_order[custom_sizes_attributes]​[0]​[_destroy]​" type=​"hidden" value=​"0"&gt;​
]
</code></pre>

<p>If I select one of the elements using jQuery <code>.first()</code> or <code>.last()</code> and then call <code>.val()</code>, I get the expected value of <code>"138"</code>. </p>

<p>When I try to use a location in the array, I can return the element of the array: </p>

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

<p>I can't call <code>.val()</code> on this object however. Instead I get this error message:</p>

<pre><code>TypeError: Object #&lt;HTMLInputElement&gt; has no method 'val'
</code></pre>

<p>I can use <code>.slice(x,y)</code> to return the single element, but this seems rather silly. What am I missing here.</p>
