Search within TutorialsPark

Jquery DOM Navigation


Learn to use jQuery select a start point and then move up the DOM.


jQuery DOM : Navigating the DOM Up the Hierarchy

You can also navigate up the hierarchy inorder to select parents and ancestors of the element contained in a jQuery Object.


Table : Methods to Navigate up the DOM Hierarchy

Selector Description
closest(selector)
closest(selector, context)
To select the nearest ancestor for each element in the jQuery object that intersect with specified selector.
closest(jQuery)
closest(HTMLElement)
To select the nearest ancestor for each element in the jQuery object that intersects with the elements contained in the argument object
offsetParent() To Find the nearest ancestor that has a value for the CSS position property of fixed, absolute or relative.
find() To select the elements that match the selector and that are descendants of the elements in the jQuery Object.
parent()
parent(selector)
To Select the parent for each element in the jQuery object, optionally filtered using a selector.
parents()
parents(selector)
To select the ancestors for each element in the jQuery object, optionally filtered using a selector.
parentsUntil(selector)
parentsUntil(selector, selector)
To Select the ancestors for each element in the jQuery object until a match for the selector is encountered. The result can be filtered using a second selector.
parentUntil(HTMLElement)
parentUntil(HTMLElement, selector) parentUntil(HTMLElement[])
parentUntil(HTMLElement[], selector)
To Select the ancestor for each element in the jQuery object until one of the specified elements is encountered. The results can be filtered using a selector.

jQuery DOM : Selecting the Parent Elements

The jQuery Method parent() is used to select the parent element for each element in a jQuery object.

If a selector is provided, then only the parent element which matches the selector are included in the result.

Example: Selecting the Parent Elements

Give it a TRY! » Note: The method parent() can go only one level up the DOM.


jQuery DOM Navigation: Selecting Ancestors

The jQuery method parents() not the last character s is used to select all of the ancestors of elements in a jQuery object, and not only the immediate parents.

If the selector is supplied, the elements will be filtered by testing whether they match the selector.

Example: Selecting Ancestors using jQuery Method parents()

Give it a TRY! » Note:The method parents() selects all parents.


jQuery DOM Navigation : Selecting Ancestors using parentsUntil() Method

The jQuery method parentsUntil() is used to work up the DOM hierarchy, to select ancestors until an element that matches the selector is encountered.

Example: Jquery navigating the DOM using parentsUntil() Method

Give it a TRY! » Note:If no matches are found , then all the ancestors are selected.


Selecting the First Matching Ancestors using closest() Method

The jQuery method closest() is used to select the first ancestor that is matched by a selector for each element in the jQuery Object.

Example: Selecting the first matching selector using closest() Method

Give it a TRY! » Note:It returns a wrapped set containing the single nearest ancestor that matches the passed expression.


Selecting Ancestors using offsetParent() Method

The jQuery method offsetParent() is similar to closest() method, it finds the first ancestor that has a value for the CSS position property of relative , absolute or fixed.

These elements are known as positioned ancestors , these properties can be used while working with animation.

Example: Selecting Ancestors using offsetParent() Method

Give it a TRY! » Note:This method works its way up the hierarchy until it reaches an element with one of the required values.