How to return array of jQuery object with selector

Question

I am trying to retrieve an array of jquery object from selector, so I would not have to re-query them again for modification later.

But, while I testing with the code, I find that the jquery selector returns array as html element if it does not query specific element.

//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'

My question is why does it return html element and not jquery object.How can I retrieve an array of jquery objects from selector.

Here's the JSFiddle example.

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

Also you can use $("#nav .menu").get(0).innerHTML = "haha";. — Taha Paksu
– Taha Paksu, Commented May 7, 2012 at 9:49
possible duplicate of jQuery: get certain element from selector — Felix Kling
– Felix Kling, Commented May 7, 2012 at 9:53

ThiefMaster · Accepted Answer · 2012-05-07 09:44:55Z

11

.get(i) returns the DOM element. What you want is one of these:

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

See http://api.jquery.com/category/traversing/filtering/ for a list of possible filter functions.

answered May 7, 2012 at 9:44

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LoneWOLFs · Accepted Answer · 2012-05-07 12:03:01Z

4

$('#nav .menu') does return an array of the matched elements. But to use it you have to access it properly. Consider the following code

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.

above is same as

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

If you do a alert(x.length) u'll get 5 as an alert which indicates the length of the array as per your example.

JSFIDDLE Example

answered May 7, 2012 at 12:03

LoneWOLFs

2,3163 gold badges20 silver badges38 bronze badges

Comments

thecodeparadox · Accepted Answer · 2012-05-07 09:47:30Z

1

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

or

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

or

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

or

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

answered May 7, 2012 at 9:47

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Collectives™ on Stack Overflow

How to return array of jQuery object with selector

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related