Traversing the DOM tree with jQuery

Updated . Posted . Visible to the public.

jQuery offers many different methods Show archive.org snapshot to move a selection through the DOM tree. These are the most important:

$element.find(selector) Show archive.org snapshot
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) Show archive.org snapshot
Get the first ancestor element that matches the selector. This also finds the current element, if it matches the selector.

$element.children(selector) Show archive.org snapshot
Get the immediate children of each element in the set of matched elements, optionally filtered by a selector.

$element.parents(selector) Show archive.org snapshot
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) Show archive.org snapshot
Get the immediate parent of each element in the current set of matched elements, optionally filtered by a selector.

$element.filter(selector_or_function) Show archive.org snapshot
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 Show archive.org snapshot .

If you would like to transport your jQuery knowledge to the native DOM API, see DOM API for jQuery users.

Henning Koch
Last edit
Niklas Hasselmeyer
Keywords
navigate
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2011-03-11 09:49)