Search code examples
jqueryjquery-selectorsdom-traversal

Selector for grandchildren, or how to anchor the selector on a known element

Let's say I have a hierarchy of elements, with #root at its root. I can use $('#root > * > *') to get all its grandchildren. Is there any way I could do that if I already have $('#root')?

$('#root').find('* > *') is definitely not it, as it will happily "start" from any descendant for the first star, not just #root children.

Is there any function in jQuery that would "anchor" at the current element, starting with its children or itself? It's been bugging me for a while, and I couldn't find anything similar in the docs.

Solution

  • Either start the find expression with another > (this syntax is documented):

    // This is functionally the same as $('#root > * > *')
$('#root').find('> * > *')

    Or call .children() twice: once for its children and again for its grandchildren:

    $('#root').children().children()