我正在尝试从选择器中检索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对象。如何从selector中检索jquery对象的数组。
这是JSFiddle示例。
答案 0 :(得分:9)
.get(i)
返回DOM元素。你想要的是其中之一:
$('#nav .menu').first()
$('#nav .menu').eq(0)
请参阅http://api.jquery.com/category/traversing/filtering/以获取可能的过滤功能列表。
答案 1 :(得分:3)
$('#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作为警报,根据您的示例显示数组的长度。
答案 2 :(得分:0)
$('#nav .menu:eq(0)');
或
$('#nav .menu:first');
或
$('#nav .menu').first();
或
$('#nav .menu').eq(0);