jQuery traversing ancestor Part2

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. 

• Example -syntax

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

• Example - syntax

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.