In jQuery, what happens when you have two .children() functions?

Question

In jQuery, what happens when you have two .children() functions?

 var area = image.canvas.children('.image-pinpoint-edit').children('.image-pinpoint-edit-area');

Is it redundant? cant you just do image.canvas.children('image-pinpoint-edit-area') to get the inner children?

Answer 1

You can use image.canvas.find('image-pinpoint-edit-area') - this will look for the closer element that matches given selector(no matter on which level it exists), .children looks only for elements that are direct children of given selector.

edit: Your way to do this by .children().children() is also fine, I'm not sure what is faster (.children().children() or .find()) but your code should work!

Answer 2

var area = image.canvas.children('.image-pinpoint-edit').children('.image-pinpoint-edit-area');

this is not redundant...

you are getting the children of the children...

1 level <--- image.canvas
2 level <----- .children('.image-pinpoint-edit')
3 level <----- .children('.image-pinpoint-edit-area').children('.image-pinpoint-edit-area')

if you wishes to find 'image-pinpoint-edit-area'

use .find()

image.canvas.find('.image-pinpoint-edit-area');    
// this this will search all its children, grand children, grand grand children, etc...

Answer 3

It is possible for humans to do this, but DOM elements can't be both the parent and grandparent of a given element.