This post was most recently updated on September 26th, 2017
Definition:
- parent() – Use this method to get direct parent element of the current selected element.
- parents() – Use this method to get all parent elements of the current selected element.
- parentsUntil() – Us this method to get all ancestor elements between the selector and the parameter you have selected in the parentsUntil() method. In this method parameter inside the parentsUntil(‘#parent1’) is essential part, if you missed to use parameter it will work like parents() method.
See the difference between these methods with example given below:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div id="parent1" style="width:470px; height:265px; padding:20px; border:3px solid blue;"> <div id="parent2" style="width:420px; height:220px; padding:20px; border:3px solid black;"> <div id="parent3" style="padding:20px; border:1px solid #000000; width:370px; height:175px; border:3px solid red;"> <div id="parent4" style="padding:20px; border:1px solid #000000; width:320px; height:130px; border:3px solid purple;"> <p style="padding:10px; background-color:lime; border:2px solid lime;"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div> </div> </div> </div> <br/> <button class="btn-parent">parent()</button> <button class="btn-parents">parents()</button> <button class="btn-parentsUntil">parentsUntil(parameter)</button> <button class="btn-parentsUntil-no-param">parentsUntil()</button> |
CODE:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
$("document").ready(function(){ $(".btn-parent").click(function(){ $("p").parents().css({"background-color":"transparent"});// only to remove background color from all element if already set. $("p").parent().css({"background-color":"yellow"}); }); $(".btn-parents").click(function(){ $("p").parents().css({"background-color":"transparent"});// only to remove background color from all element if already set. $("p").parents().css({"background-color":"yellow"}); }); $(".btn-parentsUntil").click(function(){ $("p").parents().css({"background-color":"transparent"});// only to remove background color from all element if already set. $("p").parentsUntil("#parent1").css({"background-color":"yellow"});//with parameter }); $(".btn-parentsUntil-no-param").click(function(){ $("p").parents().css({"background-color":"transparent"});// only to remove background color from all element if already set. $("p").parentsUntil().css({"background-color":"yellow"});// without parameter }); }); |
Output:
Explanation: In the above example see there are green colour box with paragraph with four other boxes with a specific border colours and just below to that there are four buttons.
Now check the difference between each buttons.
When you click on parent() button it will set yellow background colour to direct parent of green box which in purple colour border.
When you click on parents() button it will set yellow background colour to all parent elements of the green colour box till the body.
When you click on parentsUntil(parameter) button it will set yellow background colour up to the black border colour box because we have given parameter “parentsUntil(‘#parent1’)” and “#parent1” is a blue border box.
Now click on last button parentsUntil() it will behave like parents() method because we have not given any parameter in the parentsUntil() method.
Click here to check all these methods in DEMO page
