Posted over 8 years ago. Visible to the public. Repeats. Linked content.

Traversing the DOM tree with jQuery

jQuery offers many different methods to move a selection through the DOM tree. These are the most important.

$element.find(selector)
Get the descendants of each element in the current set of matched elements, filtered by a selector. Does not find the current element, even it matches. If you wanted to do that, you need to write $element.find(selector).addBack(selector).
$element.closest(selector)
Get the first ancestor element that matches the selector. This also finds the current element, if it matches the selector.
$element.children(selector)
Get the immediate children of each element in the set of matched elements, optionally filtered by a selector.
$element.parents(selector)
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector. Despite the name, this looks at all ancestors, not just the immediate parents.
$element.parent(selector)
Get the immediate parent of each element in the current set of matched elements, optionally filtered by a selector.
$element.filter(selector_or_function)
Reduce the set of matched elements to those that match the selector or pass the function's test.

jQuery has a select method, but it has nothing to do with navigating the DOM tree. You are probably thinking about Prototype's select method.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Henning Koch
Last edit:
over 1 year ago
by Henning Koch
Keywords:
navigate
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more