jQuery traversing descedents

Hello guys, welcome to our series jQuery.

In the previous segment we have completed the basics of jQuery traversing. We have also seen how to find ancestors in JQuery using three different methods – parent, parents and parent until.

Today’s segment is the second point(or sub-topic) of jQuery traversing. In the previous segment we learned  about ancestors. Like  how to go above the element to its parent or grand-parent. In today’s segment we’ll go below the element. Means rather than going upwards we will go downwards. As in the previous segment we found the parents of the elements, today we’ll find the child of the element.

How can we get the child of the element?

So you all must have gotten the idea that somehow it is similar or opposite to the previous one. But instead of the parents, we are gonna find out about the child.

Let's continue with the segment. As you can see jQuery traversing descendants. So to find out the descendants or the child of the element we have two methods available for this in jQuery.  Firstly, the children method and secondly, find method.

So let's start with the children method. Basically, We can get an idea of this by its name that it will get us the child of its element. But as you can see here, “The children method returns the direct children of the given selector”. In English, children is plural, meaning if there is one then it is known as child but more than one is known as children. OK.

So what does children return, it will definitely not return one child but rather it will return children. This is what we can understand here. As you saw before in the case of the parent method, it returns the first direct parent only. And in the parents method all the parents of the element are returned. In descendants of how to only find the first child is not available as it is a children 's method. By the children method we will get all the children of the element at once.

Here, “This method traverses only a single level down the DOM tree”. Means it will go one level down below.

“We can use the find method to traverse multiple levels down or return the descendants”(such as grandchildren, great-grandchildren etc.). Means, if we want to go more levels down then we will use the find method.

We will see the difference between them after this when we will use the find method with the help of an example. Then it will be more clear.

Here in children method syntax , dollar selector and children, for whatever we have to find. Now in this it makes sure that you don’t write childrens instead of children. Means that you don’t have to join the letter ‘s’. Because it is a common mistake which most people do  and in English there is no word as childrens. Children is the plural form of child so make sure you don’t write childrens.

So now the filter is optional. That means if you just have to find a particular value from multiple values then you can search in this. If no, then it's OK you can also pass.

Here is a simple example of the children method to find out children method. It is similar to what we have done in the parent method.

Let's first open sublime text.

First let's set HTML….

This HTML example… children.

 We’ll add a library as javascript for jQuery…. And in our text document dot ready… and here we’ll keep it ready by writing a function.

Now here lets add our style…. Body…. Text-align centre.

And previously we made a class named design and in design applied some things like, border…. two PX… solid green…. Rest we’ll write later.

Firstly here inside H one… we will write example children. Here we have to add a DIV which will be related to our design class….

Class equals design... In this we will make DIV….

“This is …DIV” . After DIV, we’ll take UL. This is UL…. Then after UL we took H two… This is H two... And now here we’ll take a P in which we will write “this is a… statement to click.”

Now we will save the program…. We will name it as children. Now firstly we will run this program…. As you can see nothing is properly visible like we made our program.

So firstly we’ll add a button below H one. Button…. Id button. Click….

And above the click button what we have to highlight is children. So here will come our dollar button… dot click. And this is our function where we will highlight our children. But for now I’ll keep it like this and not make any changes.

In design we will leave a margin like five pixels or ten pixels. Padding ten pixels. We will write “text align” as center. And everything else that is missing...

Save. Reload. Now this is showing properly. Instead of ``This is a statement to click” we will write “this is a statement”.

Ok. So our frame is ready as it was like our parents. Now I want to find some children. So let's say here our second DIV. This is our border of the first DIV and this outside is DIV borders. For this element we have to find out the child element.

So say if we have to find out of this DIV then either I can write this directly  or we can write this DIV by giving a class or id. But as of now here dollar DIV… dot children. This is our method. Dot CSS.. and here we will write… a border comma two or five pixel ….solid red. We will save it.

Now we will check which of our DIVs is detected when we click the button. So now here none of the DIV is being detected. OK. so it means we have some problems here. So as you can see this button is our ID here , so we’ll take the hashtag, reload.

So as you can see the outside DIV where we have attached our class design is detected. And the child of this DIV is detected first so this border becomes red.

Second thing is that the child is also detected named UL so its border is also showing red.  But as I said earlier, in case of children it will only search its direct elements.

So let's give this DIV an ID named DIV one. And now if we find out their children then UL should be highlighted. But nothing is highlighted so here will come a hashtag and rather my UL is highlighted. Means UL is a child of DIV one but this is only one child so only the border is highlighted.

Lets say after this UL is finished we will add one more UL or something else like UL… “This is… another UL”.

 Save. Reload.

So as you can see now under this another UL added under this UL. And with that I will also add H three…. “This is the heading”. So here another h three added. So this is my UL, this is my another UL and this is my H three.

So now when i click on this then you can see things have become red. The first UL which was red before, another new UL which I added and H three. So if I only keep one child element under one DIV then that is highlighted. But if it has multiple child elements, means in this DIV which is closed at forty nine, if close this UL then this UL, this another UL and H three all become the child of DIV one. That's why this box is highlighted.

So here only the direct children are all highlighted but if multiple level children are there then they won’t get highlighted. That’s why H two and this statement portion are not highlighted but rather only these direct ones are highlighted.

Now lets say in place of UL if we specifically pass H three in children and then when I run it,  Then only my H three is highlighted. Now as you see here P does not have a direct child. So if we run it by just writing P then you can see here no output is coming. Because P is not a direct child.

So what child method returns us is the elements who have a direct child. So if we remove it. Save and reload.

Then all those elements which have direct children are highlighted. So this is our “children” method. After the children method comes the find method. Now we have to see two things, firstly, how the find method is different from the children method and second what the find method does.

What  find elements does is, “it finds descendants can be child, grand child and so on”. Meaning if children return us the direct child and find return us all the children.

Here, “the find method traverses downwards from the selected element in the DOM tree”. As we saw before that it would find out in a downward direction.

“We can use the star selector for returning all descendant elements”. It means whether we use the star element or not it will return all the elements.

Like now here after selector it is written here find filter. So instead of filters we can also use “star. Star will help us to get all the elements. We will perform it without a star. We can also find a specific child element in this.

So here as we did not find P but with the help of find we can get it. so to perform its practical we’ll copy the previous program and paste it as it is. Instead of children we’ll write find. And here also find. We’ll save our program… And now we’ll run it..

So this is my program now. It is the same as the previous program with a small change of find method. We have to see what output we will get In this division  which has ID div one. So lets say I click here. Nothing is happening  here. Means something is missing .

So here we have not written star. So as you can see when I clicked it after writing star then all the child elements were returned. This indicates that the filter method is actually not optional. It is written as optional but here we can pass an element in the star. Means “find method must be accepting a parameter either a star or an element”. So if we write it without a star then it won’t run and if we write it then all the elements will return. Means all the child elements will return.

Now if I have to find the only element by removing the star. In the previous example we did not find P. So now here I will write P and save it. Reload and click. So as you can see P has been returned.

This indicates that the find method can return one specific element, direct child or the grandchild. So if you have passed any element under selector then all the children of that selector are returned. So as compared to children, find is more useful. But if you only have to find a direct child then you can use it. And finding a specific child or grandchild “find” is useful.

So this is our example of find. So guys, find and children were two methods to find descendants. We did it today because we covered all the basics in the previous segment.

I request when you practice these examples then you do it with both methods. and if you come across any query, question or doubt related to today’s segment then you can tell us at FORUMS dot LEARNVERN dot COM, we’ll give solutions to all your questions. Discussion to be added.

So now in the next segment we will continue with traversing in which we will see how to find siblings.