jQuery traversing ancestor Part1

In our previous segment, in that we have covered ‘jQuery’ events related property and methods as well as the complete module of events, all those end with the previous segment.

Now let’s move towards today’s new module, from this particular segment we will learn about how to do traversing in jQuery.

Now the first question is what is traversing?

So basically for example when you go to travel somewhere and you don’t know the route of it, then what do you do?

These days everyone has Google Maps available on their phones. We add the current location in the map and then we add the location we want to visit as an end point. Then we get the source and end point. Then Google Map gives us the path as a product. Then we start our journey and we can reach our location or the end point.

Basically when we do this  it is not necessary that we are going directly to our location there are various points for example if I want to visit a particular relative it is not necessary that I want to visit their house directly, it may be possible I have to go through other relative’s home in that way, third relative’s home also. 

So what do I do? From my home I visit the first relative’s home, then I go to the second one and then I reach the location that I wanted to visit.

But what am I doing here? I am not directly reaching the destination but I am reaching that location via some points like the first milestone then the second one and finally the destination. 

So this thing which I have done can be called traversing because I am covering the first area, then the second area also and then reaching, this is an example of traversing.

If you are from an engineering background then you must have gone through the ‘shortest path’ algorithm. 

What do we do on the shortest path? We do traversing, it means the example that I have given you verbally in that map in which I am visiting relatives and so on.

Similarly in technical terms the shortest path algorithm also comes in which from one point to another if multiple paths are available then which path we should take which will take to the end point fastest.

In real life also we face these kinds of consequences, there is less time for everyone so for that the place we are in from there, if we want to reach some place. We take the fastest route available. 

We take a one hour route instead of a three hour route. We try to take the fastest route possible.

If we take any course then we also take those courses which end quickly and we can gain knowledge from that.

Shortest path is similar to that if we go from one location to another location, starting point to ending point then we take that path which we can reach quickly. 

In this algorithm connecting points also means the path I take from the starting point, means the points of the path. Which locations will I traverse as a result I can reach there quickly? 

So all the following words and examples I have given are all given to clear the concept of exactly what is the meaning of traversing. Means when I go from one place to another what does it cover in the way.

Now let’s move to jQuery, in our today’s segment in that jQuery traversing multiple points or topics from that it covers one topic that is ancestor but before that what do we traverse in traversing?

Means if in LearnVern you have completed JavaScript course, HTML CSS core if you have completed this also then many times you must have heard ‘siblings’ or ‘parent’ word from my mouth. In which “parent element”, “child element”, “siblings element” we use these terms. 

Basically all these things can be acquired by jQuery. So what does jQuery help with? jQuery helps us in finding out the ancestor. Ancestor means our past generations. If we translate exactly in Hindi language it means “Purwaj”. So who are our ancestors? Means if we use our DOM language, in Web Development language then if we take any particular element and their parent element’s parent means grandparent and higher than that means grand grandparents who are those? To find out these things it is possible through jQuery.

Second thing descendents, descendents means child, that is I am the descendent of my father because I am his child, then me, then my child and so on. So goes like this in the hierarchy like son, then grandson then great grandson. So to find out these types of things and these are the descendents. And if we go above father, grandfather, great grandfather if we go in this hierarchy then we came to find out ancestors and similarly son, grandson in this way we find the descendents. And if I, my cousins, sisters, etc I am checking these then they are my siblings. Siblings mean people from the same generation.

So here we are finding out three things: ancestors, descendents and siblings. We will cover these things in our web development course. In web development terms it will be finding the parent or grandparent element of any particular element so here finding all the ancestor methods will be useful.

Finding the child or grandchild element of any particular element then the descendent method is used. 

Third is finding the same or the elements that are together then it will be found out by sibling method.

And lastly a part of jQuery traversing that is filter, which helps us find in technique from which we can find so and so means we can find conditional based elements.

So all the four things that are ancestors, descendents, siblings and filtration all the four things we will cover in our current model.

In today’s segment we will start with ancestors, what are basically ancestors? Likewise I have explained how to find out the parent element of the current element. Means I want to search for a particular element but for parents only. Means all the parent elements that I have and from that one particular element or I want to check how many parent elements are available or exist in that element. So to find out these, how many methods are available? 

In jQuery traversing, to check ancestors there are a total of three methods available in which the first is parent() method, second is parents() method in which S has been added and the third is parentsUntil() method. 

So in all these three methods in various ways we can find out the parent element.

Let’s start with our first method which is the parent method. What does basically the parent method do? “Parent method in jQuery will find out the direct parent of the given selector. Means the selector that we passed, it will give the very first direct parent of that particular selector, this is provided by the parent method. Second point is parent is an inbuilt function of jQuery means jQuery provides us this function. The third thing is this method only traverses a single level up in the DOM tree meaning in only one direction it travels upwards, and returning the direct parent of the selected element means the direct parent of our element that will return in this particular method, and the hierarchy goes in the upward direction. 

What is the syntax of the parent method? As usual with the syntax of other methods in jQuery, exactly in the same way the syntax of our parent is after the selector we have used dot parent means it is the name of the method, after that filter is used and a parameter is passed. 

Now please listen carefully, selector means whatever the element is means that I have to find so and so parent of an element then I will get that from the selector. Second thing is what does filter do? Here filter is optional here, optional means if I want to check the element that I have and does it have so and so parent or not, so to check that here in filter parameter, I will use a name of the particular element means I want that in my P tag, means instead of selector I will write here P in inverted comma. I want that in my P tag if there are any H one or H two parents there or not, to check that I will write here H one or H two and pass it means that I will pass a particular name.

Second thing if I want to check that if there is any parent then highlight that parent. To check this we won’t pass any filter parameter. Two things are done. 

If we want to check one element specifically that it is parent or not then we will pass value in the filter. But if I don’t want to check means that I don’t want to check if parent or not, in that case the filter will be passed empty. Clear?

There are two ways to check the parent: those are we are checking in particular that so and so parents are available or not or we are checking that parents are available or not. So we will check these things with the examples.

Our example is this “on click highlight the parent element” means that when I click then the parent available on that click it will be highlighted. 

Here an example is given to check that but we will use both the ways to check the parent whether there is a parent available or not, and so and so parent available or not, these two things will be checked from this example.

So first of all we will open the sublime text. Here inside the sublime text here we will set it in HTML… and after setting it in HTML since we are seeing the example of parent here EXAMPLE… PARENT. And now the library that we add, we will add that library in this line …SCRIPT. Inside the script we will write what we want to write so as of now DOLLAR is our factory function and I will write it here. 

[Typing sound] 5 seconds

So I have written the factory function here and inside the style since we write everything in the center line so BODY, TEXT-ALIGN; CENTER.

Here inside the H one we will write EXAMPLE.. PARENT…., so here is the example parent and we will save this program  inside the traversing, we will name it as PARENT. 

Now here comes the program Parent dot HTML, I will run this program. So this is my program that is running here. Basically while we are creating a program in the traversing, we will follow a particular thing that is we will keep some element here for example currently I have taken a H one here below the H one a DIV is taken that is my div.. and I will name it as…means I want to give it color or design I can do that but now I will keep the DIV as it is. Inside this DIV I will add an UL and inside this UL, LI (list items won’t be added). I will add only H two tags and inside this H two I will add a P tag. 

Now let’s see what I have added? I have taken a DIV, inside the DIV let’s say I will write “This is a div”. Then in UL”… I will write “This is a UL”…, in H two I will write “This is a Heading two” and inside the P I will write “This is a statement”. Now what will we do after that, we add some basic styling here like this is our body and we will add some things inside the body like font size I will take twenty pixel, color will be…light coral, border will be as of now two pixel solid light coral that will be kept same and in each and every division we will add some padding like ten pixel… of padding. And between each division there will be margin let’s say MARGIN equivalent to 10 pixels. 

Now we will run this, you can see that this is my program, body has been colored. Here is the example parent, div, UL, heading, statement everything is seen now. 

Here we will do one more thing instead of body all the contents that have been added let’s cut it….. Here we will use our wild card. Our wild card here is star, keep it here. From the start CSS has been applied everywhere, here I want in our DIV, inside the body I will take a class or else in this DIV okay one more DIV is taken. And inside this in our content here let’s add class, CLASS… DESIGN.

[Typing sound]( 3 seconds)

All the things that we wanted to add came here, now I will save it okay. 

Now you can see that here is our example parent, here this is a div means this portion that you can see that is written here this is our division segment. 

Second this is an UL means this is our UL portion that comes under list. Heading two means this is our heading portion, and the statement is our P.

If we look here is our div, the design named div its child is this div in which the statement is here. Its child is UL in which UL statement is there and its child is H two in which this H two statement is given and its child is P.

So if I have said here child then we will see it in the opposite direction, parent of P is H two, parent of H two is UL and the parent of UL is DIV. Now what I have to do is I have to find the parent of this P so ideally H two will be our parent but first time I want to check without any parameter that what is the parent of the P. Here I will take a button here in our design we will add a parent here or we can add it in the example so let’s say here we will add our button. We will name each and every button ‘click’ as usual, and the ID will be “btn”.

Here in which we have written a document dot ready in their “dollar hashtag… btn dot… click ….function”. And inside this will come the parent that we want to check. So first of all we will write our selector, I have to select the selector according to the selector. I want to check the parent of this P. So I will write here “dollar P ….dot… parent”. So after writing this line what will happen whatever the parent of P we will get it but how will I know that this is the parent of P. Let’s say I will save it and run this program, and I am clicking here but you can see that I am getting the parent but it is now shown here because we haven’t applied any action. So I will add that action here.

So for that what will we do here, we will come in our program and in our parent dot …CSS. So now I am writing the CSS that is highlighting our parents. So let’s say whatever my parents are currently I will change my background with another border. So let’s say ‘border coma ..three pixel solid red’… let’s make it. Save and reload it.

So what will happen is when I will click here in this particular heading two you can see that there is a good red color border. So this red color border indicates that my P is here, the border of the P that is of light coral and the red is the border of H two. So the parent of P is H two and that border has been shown with red color.

So currently I haven’t passed the parent. I have done it without passing it. If I take a particular parent means it is currently H two let’s say I will take UL here and find the parent of P that is UL and then what will be the output? So I will save it and reload the program. Let's do one thing instead of light coral and replace it with light green.

[Typing sound]( 5 seconds)

Reload so here all the lines are now light green, let’s change the color in light green also…

this color is not looking good and we will update it.

So here is the color, ….okay so we will take this green color.

[Clicking sound]( 5 seconds)

So here is our green color and we will click it here so that whatever my parent UL is that will be highlighted. So I am clicking here and it is not highlighting.
So here the direct parent is not considered as UL, if I replace it with H two, save and reload it and then click. Now you can see that H two is changing into red. So what does it show? 

We can get a direct Parent from the Parent method and return it. So in my P statement the direct parent is H two, and I am getting H two in return but when in direct parent specifically I tried to search UL then I didn’t get any result means the direct parent of P is H two so if I want to find UL then I won’t get any answer but if I don’t pass anything then also I will get H two and if I take H two name then also I will get H two.

So this is the parent method, I have used two ways to cover the parent method, by passing the parameter and also by not passing it means not specifically identifying it. So this parent method returns us if it is parent or not.

In our today’s segment we will keep it this much only and in our next segment in that also ancestor related two methods that is Parents and Parent Until, these two are remaining so we will be continuing that.

Let’s meet in our next segment and we will continue the ancestor method.