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
Thanks for a marvelous posting! I definitely enjoyed reading it, you can be
a great author. I will remember to bookmark your blog and will eventually come back
sometime soon. I want to encourage you to continue your great
posts, have a nice weekend!
Excellent, what a webpage it is! This web site gives helpful facts to us, keep it up.
I’m not that much of a internet reader to be honest but your sites really nice, keep it up!
I’ll go ahead and bookmark your website to come back in the future.
All the best
What’s up colleagues, how is all, and what you want to
say regarding this piece of writing, in my view its actually remarkable designed for me.
Hello there, just became aware of your blog through Google, and found that it is
truly informative. I am going to watch out for brussels. I’ll appreciate if you continue this in future.
Many people will be benefited from your writing.
Cheers!
I have fun with, lead to I found just what I used to be looking for.
You have ended my 4 day long hunt! God Bless you man. Have a nice day.
Bye
This piece of writing is truly a good one it helps new internet viewers, who are wishing for blogging.
Admiring the hard work you put into your site and in depth information you present.
It’s nice to come across a blog every once in a while that isn’t the same unwanted rehashed information. Great read!
I’ve saved your site and I’m including your RSS feeds to my Google account.
Appreciate this post. Will try it out.
You really make it seem so easy with your presentation but I find this topic to be actually something which
I think I would never understand. It seems too complicated and very broad
for me. I’m looking forward for your next post, I’ll try to get the hang of it!
Hello there! Quick question that’s totally off topic. Do you
know how to make your site mobile friendly?
My weblog looks weird when browsing from my iphone4. I’m trying
to find a theme or plugin that might be able to resolve this problem.
If you have any suggestions, please share. Cheers!
Hey! I’m at work surfing around your blog from my new apple iphone!
Just wanted to say I love reading through your blog and look forward
to all your posts! Keep up the outstanding work!
I was curious if you ever thought of changing the structure of your website?
Its very well written; I love what youve got
to say. But maybe you could a little more in the way of content so people
could connect with it better. Youve got an awful lot of text for only having one or
2 pictures. Maybe you could space it out better?
Excellent post. Keep posting such kind of info on your blog.
Im really impressed by it.
Hey there, You’ve performed a fantastic job. I will definitely digg it and personally suggest to my friends.
I’m confident they’ll be benefited from this website.
I have read so many content regarding the blogger lovers however this article is really a good post,
keep it up.
Magnificent web site. A lot of useful info here.
I’m sending it to some friends ans also sharing in delicious.
And of course, thanks on your sweat!
Aw, this was a really nice post. Spending some time and actual effort to
make a top notch article… but what can I say… I hesitate
a whole lot and don’t seem to get anything done.