.children() does not work on specified index of jquery return

Question

I'm trying to get the children of the nth element returned by a jquery call. For example:

var kids = $('div')[7].children();

However, I keep getting this error with respect to children():

Uncaught TypeError: object is not a function

Can someone explain why this happens? children() works fine as long as I'm not calling it on an indexed element.

Answer 1

It's because it is no longer a jQuery object after you specify an index [7]. Thus, you are calling a jQuery method on a DOM element (which doesn't work).

You could use the .eq() method instead:

$('div').eq(7).children();

You could also use:

$($('div')[7]).children();

It's worth pointing out that this would work because the DOM element is wrapped in $() - thus turning it into a jQuery object.

Answer 2

You're using children method in javascript object i.e. $('div')[7]. To work with jquery method you need to use jquery object instead of javascript object.

Use eq method:

var kids = $('div').eq(7).children();

Answer 3

When you use array syntax with a jquery list you get back a document node, not a jquery element. Use $('div').eq(7).children() instead.