jquery - 如何使用选择器返回 jQuery 对象数组

Question

我正在尝试从选择器中检索 jquery 对象数组，因此我不必再次重新查询它们以便稍后进行修改。

但是，当我使用代码进行测试时，我发现如果 jquery 选择器不查询特定元素，它会将数组作为 html 元素返回。

//HTML
<div id='nav'>
    <div class='menu'>menu 1</div>
    <div class='menu'>menu 2</div>
    <div class='menu'>menu 3</div>
    <div class='menu'>menu 4</div>
    <div class='menu'>menu 5</div>
</div>​


//JS

//this works
$('#nav .menu:eq(0)').html('haha');

//this does not    
$('#nav .menu').get(0).html('halo w');​ 

-> Uncaught TypeError: Object #<HTMLDivElement> has no method 'html'

我的问题是为什么它返回 html 元素而不是 jquery 对象。如何从选择器中检索 jquery 对象数组。

这是 JSFiddle 示例。

http://jsfiddle.net/mochatony/K5fJu/7/

Answer 1

.get(i)返回 DOM 元素。你想要的是其中之一：

$('#nav .menu').first()
$('#nav .menu').eq(0)

请参阅http://api.jquery.com/category/traversing/filtering/以获取可能的过滤器函数列表。

Answer 2

$('#nav .menu')确实返回匹配元素的数组。但是要使用它，您必须正确访问它。考虑以下代码

var x = $('#nav .menu'); //returns the matching elements in an array

//(recreate jQuery object)
$(x[1]).html('Hello'); //you can access the various elements using x[0],x[1] etc.

以上与

$($('#nav .menu')[1]).html('Hello');​

如果你这样做，alert(x.length)你会得到 5 作为警报，它根据你的示例指示数组的长度。

JSFIDDLE 示例

Answer 3

$('#nav .menu:eq(0)');

或者

$('#nav .menu:first');

或者

$('#nav .menu').first();

或者

$('#nav .menu').eq(0);