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选择一个输入对象数组，当我尝试在选择一个数组元素后将多个方法链接在一起时，我遇到了一个有趣的问题。有人能解释一下我为什么会有这种行为吗?
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".
如果我使用jQuery .first()或.last()选择其中的一个元素，然后调用.val()，就会得到“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:
然而，在这个对象上我不能调用.val()。相反，我得到了这个错误信息:
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.
我可以使用.slice(x,y)返回单个元素，但这看起来相当愚蠢。我错过了什么。
3 个解决方案
#1
5
The following code:
下面的代码:
$(".something")[0]
gets a single DOM element from the jQuery set. This code does the same as if you do
从jQuery集合中获取一个DOM元素
document.getElementsByClassName("something")[0]
Retrieved DOM element doesn't have val() method, since it is not a jQuery object.
检索的DOM元素没有val()方法，因为它不是jQuery对象。
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):
为了从jQuery集中获得第一个jQuery对象，您可以使用:eq()选择器(或.eq()方法)，或者:第一个选择器(或.first()方法):
$(".something:eq(0)"); // $(".something").eq(0);
$(".something:first"); // $(".something").first();
#2
5
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.
如果您访问一个带有括号标记和索引的jQuery对象，它将返回该索引处的原始DOM元素。DOM元素没有任何jQuery方法。
.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).
.first， .last或.eq另一方面返回一个jQuery对象。要在特定的索引n处获得jQuery对象，请使用$(…).eq(n)。
#3
2
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.
索引的本机位置([1])返回指定的DOM元素。jQuery函数像。first()返回一个jQuery对象(在jQuery皮肤中封装的DOM元素)，它具有其他函数。
#1
5
The following code:
下面的代码:
$(".something")[0]
gets a single DOM element from the jQuery set. This code does the same as if you do
从jQuery集合中获取一个DOM元素
document.getElementsByClassName("something")[0]
Retrieved DOM element doesn't have val() method, since it is not a jQuery object.
检索的DOM元素没有val()方法，因为它不是jQuery对象。
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):
为了从jQuery集中获得第一个jQuery对象，您可以使用:eq()选择器(或.eq()方法)，或者:第一个选择器(或.first()方法):
$(".something:eq(0)"); // $(".something").eq(0);
$(".something:first"); // $(".something").first();
#2
5
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.
如果您访问一个带有括号标记和索引的jQuery对象，它将返回该索引处的原始DOM元素。DOM元素没有任何jQuery方法。
.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).
.first， .last或.eq另一方面返回一个jQuery对象。要在特定的索引n处获得jQuery对象，请使用$(…).eq(n)。
#3
2
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.
索引的本机位置([1])返回指定的DOM元素。jQuery函数像。first()返回一个jQuery对象(在jQuery皮肤中封装的DOM元素)，它具有其他函数。