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?

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

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

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

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

I can't call .val() on this object however. Instead I get this error message:

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

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

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?

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

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

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

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

I can't call .val() on this object however. Instead I get this error message:

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

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

• javascript
• jquery

• Put together a jsfiddle that demonstrates the problem, that way we can play with it and maybe help. – michaelward82 Commented Nov 23, 2012 at 8:39

3 Answers 3

The following code:

$(".something")[0]

gets a single DOM element from the jQuery set. This code does the same as if you do

document.getElementsByClassName("something")[0]

Retrieved DOM element doesn't have val() method, since it is not a jQuery object.

In order to get the first jQuery object from jQuery set, you may use either :eq() selector (or .eq() method), or :first selector (or .first() method):

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

If you access a jQuery object with bracket notation and index, it returns the raw DOM element at that index. DOM elements don't have any jQuery methods.

.first, .last or .eq on the other hand return a jQuery object. To get a jQuery object at a specific index n, use $(...).eq(n).

The native location by index ([1]) returns the specified DOM element.
jQuery functions like .first() return a jQuery object (pretty much DOM elements wrapped in a jQuery skin) that has those other functions.