Tại sao mảng [0] trả về một đối tượng khác với array.first bằng cách sử dụng jQuery và tại sao tôi không thể sử dụng .val()?

Question

Tôi đang chọn một mảng các đối tượng đầu vào bằng cách sử dụng jQuery và tôi đang chạy vào một vấn đề thú vị khi cố gắng kết hợp nhiều phương thức sau khi chọn một trong các phần tử mảng. Bất cứ ai có thể giải thích cho tôi tại sao tôi nhận được hành vi này?

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

Nếu tôi chọn một trong các yếu tố sử dụng jQuery .first() hoặc .last() và sau đó gọi .val(), tôi nhận được giá trị kỳ vọng của "138".

Khi tôi cố gắng sử dụng một vị trí trong mảng đó, tôi có thể trả lại phần tử của mảng:

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

tôi không thể gọi .val() trên đối tượng này tuy nhiên. Thay vào đó tôi nhận được thông báo lỗi này:

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

tôi có thể sử dụng .slice(x,y) trở lại các yếu tố duy nhất, nhưng điều này có vẻ khá ngớ ngẩn. Tôi đang thiếu gì ở đây.

Answer 1

Các mã sau đây:

$(".something")[0] 

được một đơn tố DOM từ tập jQuery. Mã này giống như khi bạn làm

document.getElementsByClassName("something")[0] 

Phần tử DOM được truy cập không có phương thức val() vì nó không phải là đối tượng jQuery.

Để có được là người đầu tiên jQuery đối tượng từ jQuery thiết lập, bạn có thể sử dụng một trong hai :eq() chọn (hoặc .eq() phương pháp), hoặc :first chọn (hoặc .first() phương pháp):

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

Answer 2

Nếu bạn truy cập một đối tượng jQuery có ký hiệu khung và chỉ mục, nó trả về phần tử DOM thô tại chỉ mục đó. Các phần tử DOM không có bất kỳ phương thức jQuery nào.

.first hoặc .eq mặt khác trả lại đối tượng jQuery. Để có được một đối tượng jQuery tại một chỉ mục cụ thể n, hãy sử dụng $(...).eq(n).

Answer 3

Vị trí gốc theo chỉ mục ([1]) trả về phần tử DOM được chỉ định.
Các hàm jQuery như .first() trả về một đối tượng jQuery (nhiều phần tử DOM được bọc trong một lớp jQuery) có các hàm khác đó.