Get a specific child from children array

Question

I have an array of jQuery children which I keep in a variable:

var panels = panelsHolder.children('div');

Now, I want to address only one of those children, and I know its index, so I do as follows:

panels[currentpanel].addClass('show')

But I get an error, because the object returned by panels[currentpanel] isn't a jQuery object, it's a plane DOM element. So I'm forced to convert this to a jQuery object - like this: jQuery(panels[currentpanel]) - but there must be a way to get that object as a jQuery object from the array.

How do I do that?

Answer 1

You have to use eq() to get jQuery object instead of DOM as you are getting right now.

panels.eq(currentpanel).addClass('show')

Answer 2

The problem is that when you get the currentpanel index from panels you're getting the plain DOM object, not the jQuery object. You can fix this by surrounding it with $().

$(panels[currentpanel]).addClass('show');

EDIT: This looks like the quick and dirty way to do it as you need to 'cast' the object to a jQuery object again. eq() as Adil suggests is the way to go.

panels.eq(currentpanel).addClass('show')