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
|To select the nearest ancestor for each element in the jQuery object that intersect with specified selector.|
|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.|
|To Select the parent for each element in the jQuery object, optionally filtered using a selector.|
|To select the ancestors for each element in the jQuery object, optionally filtered using a 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, selector) parentUntil(HTMLElement)
|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 ElementsGive 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() MethodGive 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() MethodGive 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.