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

dom-traversal, jquery, jquery-selectors

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()

Problem

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.

Original source