♦ jQuery Ancestors
♣ About jQuery Ancestors
Ancestor as the name suggests, it refers to tag that is hierarchically above the current tag.There exist various ancestor methods in jQuery.
Below is a tabular explanation of ancestor methods in jQuery
| Method | Functioning |
|---|---|
| parent() | Selects a tag just above in hierarchy |
| parents() | Selects all the tags above in hierarchy |
| parentsUntil() | Selects all the tags above in hierarchy untill the specified tag |
♣ Example1: jQuery parent()
Below is the representation of jQuery parent() Syntax.Basic Syntax
$(selector).parent().event(function(){
//code_block
});
//code_block
});
Syntax Explanation:
selector : the element of which parent is to be selected
event : this can be events(click, hover, etc) or css or addClass, etc
code_block : code to executed on parent tag
In this example, the just parent border of level 4 is blue-colored.event : this can be events(click, hover, etc) or css or addClass, etc
code_block : code to executed on parent tag
Example
Input:
Output:
♣ Example2: jQuery parents()
Below is the representation of jQuery parents() Syntax.Basic Syntax
$(selector).parents().event(function(){
//code_block
});
//code_block
});
Syntax Explanation:
selector : the element of which parents are to be selected
event : this can be events(click, hover, etc) or css or addClass, etc
code_block : code to executed on all parent tags
In this example, all the parent borders of level 4 are blue-colored, including the body and html tags.event : this can be events(click, hover, etc) or css or addClass, etc
code_block : code to executed on all parent tags
Example
Input:
Output:
♣ Example3: jQuery parentsUntil()
Below is the representation of jQuery parentsUntil() Syntax.Basic Syntax
$(selector).parentsUntil(limitTag).event(function(){
//code_block
});
//code_block
});
Syntax Explanation:
selector : the element of which parents are to be selected
limitTag : tag upto which parents are supposed to be selected
event : this can be events(click, hover, etc) or css or addClass, etc
code_block : code to executed on all the parent tags
In this example, all the parent borders of level 4 are blue-colored until level 2.limitTag : tag upto which parents are supposed to be selected
event : this can be events(click, hover, etc) or css or addClass, etc
code_block : code to executed on all the parent tags
Example
Input:
Output: