Hello guys, welcome to our jQuery series.
In our previous segment we have started how to do traversing in jQuery and after understanding it’s basics we are learning how to find out “ancestors means parents.
In previous segment we have completed the parent, previously that parent we have completed in that next method is parents method.
Difference between both of them is of spelling, there is an extra 's' in parents that you can see but ;
"The parents method in jQuery is used to get all ancestor elements" means in parent method (without s) we have seen that when we apply parent method then direct parent will return as output not all the parent we will get so what parents give add on here is that in parent we get the direct element only but in parents we will get all the elements in return
If we see the difference in both of these then this slide that you can see indicates that;
The parent method is similar to parent method, as both travel up to the DOM tree and return the parent element.
But the difference is that the “parents method traverses multiple levels up in the DOM tree and returns all ancestors, including the grand parent, great-grandparent etc. of the given selector while the parent method traverses a single level up and only returns the direct parent of the given selector.
Exactly same as parents syntax as it is parent's syntax
We only have to differentiate the spelling of parent or parents. In the parent's filter we have given a specific element to get the concept ,here in parents we can add a specific element in the invited course ;but the difference here is that parents or parents both will work without parameters as well as with parameters .
In parent we have checked that if that parameter is parent then only output will be generated ;but when we checked that parameter is not parent then no change or action have been performed
In parents we will cover that two scenarios we will add it with parameter and without parameter.
- Example-In previous Sublime text we have already written that and this is parent's output here we clicked on the click button then this line appeared to be red in color
We will take this example further
So I am copying and pasting this whole program.
We will add s in the end of parent to make it parents as of now will keep this empty same program there is no difference in this , we will save this program as parents and will also run this program..
So you can see here I am zooming the screen here example parents
Button to be clicked, exactly same as we have seen in the previous example div,ul ,heading two or statement everything is here ,so what we will be getting ?we will be getting parent of p 'this is a statement'
For example we can write here… "Click the button to get all the …parents" now save… and reload it and here we have "click the button to get all the parents".
Now click on the 'click' button…
So you can see everything is in red border but let's see what things are to be seen in red border here the p tag is in green border because the element itself can't be parent here H two that is it's parent is red in color ,ul that is its grand- parent is also red in color , div that is it's parent is also red in color
Here we have taken external div in design named class that is also red in color after that you can see body class and HTML tag is also red in color means the current p statement that comes under any of the parents has been coloured red .
Let's do one thing ,here I am copying this whole program and paste it there
Here we will keep the parents but in place of ul, H two,p statement here in this div we will keep ul,H two,p like this
Let's create one more div…now we will keep only H two portions in this. what will we do , click the button to get all the parents so ,now we will save this program as “parent underscore 2” now run this program..
So here you can see we have taken this two scenarios first p and second p here parent of both is different
Let's do one thing let's click on the click button here everything has been coloured in red ,because parents of both p have been shown
Now we will bring difference in both previous program and this program Now in previous program code we will search only UL now I will save and reload this now I will click on the 'click' button now what happened is only ul parent of p statement gets highlighted
Now if I remove this then every parent element will be coloured in red ,but if I want to check single parent element then it will get coloured in red if it exists
Let's say if I searched h four in place of ul then nothing will get red because that particular element does no exist
Now let's come to this other program if I perform the same thing here … type ul… ,save , reload and click… on the 'click' button ;now you can see that between both the portion only ul of first division get red in color but not in second portion because in second portion we have not kept UL in second portion we have kept H two directly after div
So what we understood by parents
- First In whatever we have to find the parents it's all the parents will get searched if parameter is not passed
- Second If parameter is passed then it will be searched if that particular element exist and if it doesn't exist then it will not be searched
So this is our parents which helps us to search for all the ancestors .
After parents here it comes parents until
In parent's there are two limitations
- Firstly If we don't pass any parameter then each and every parent gets
- Secondly if we pass any parameter and if that particular parameter exist then it will get highlighted ,and if it doesn't exist then nothing will get highlight .
But if I want to get all the parents of one particular element then what can we do for that ? So ,the limitation of parents' method gives us the particular parent or all the parents .
But it doesn't give us all the ancestors of one particular element
This limitation gets overcome through parentsuntil
In this we have to give filter that is optional but we will see till where we have to search
After filter there is stop it indicates till which element we have to search Let's say if I want to search a single parent among all my ancestors
Let's say In our current example we have div,ul,H two so if I want to search till div I will add div in the stop and close it
If I want to search ul I will add ul in stop and close it
So till whatever I want to search I will add that in stop and then close it or if I want to search particular element till ul that also I can add in the filter portion
Stop is mandatory as we can see the method we use we have to add until to find the parents ; filter for finding that particular element
Let's take an example
We will consider our current example only…
Here write parentsuntil in place of parents… initially remove ul
Save…. and run the program initially I have not add the element till where we have to search
So let's say If I click on the click button all the parents get highlighted because we haven't passed the parameter
Now let's search the elements till div
Write div reload it and click on the click button then you can see after p only H two and ul get highlighted because it comes under div
So for finding the elements till div I have written div so this ul and H two get highlighted
No second scenario let's say if I want to find only H two till div ,so here after div write H two now save and reload it and click on the click button what will I get
Only H two get highlighted
If I write ul in place of H two then ul get highlighted in place of H two because we have add ul in the filter
Now if I add div in case of div we will get nothing because we are searching div in which div will not be considered
so this is parentsuntil
Parentsuntil gives us the limitation that you can find the elements within this limit
In this current video we have covered parents and parents until
In our previous segment we had covered parent and basics related to the ancestors so in both these videos we have covered jQuery traversing ancestor topic
So guys if you have any questions or difficulty in this or previous video or any point that is not understood by you or if you are facing any difficulty during the practice
So that all things you can share with us on 'forum dot learnvern dot com'
We will revert with you with all the solutions to your questions or queries. Discussion to be added.
We will move further in jQuery traversing ancestor in our next segment but in our current segment we have done traversing ancestors now in next segment we will do traversing descendants .we'll learn how to find out descendants in the next segment.
Share a personalized message with your friends.