jQuery traversing siblings part1

C

From the previous segment in that we are continuing jQuery traversing and we also learnt how to find descendants from it as well. So, I hope you have done the practical of whatever was taught previously.

Moving forward with today’s segment, today’s segment is an important segment from Traversing which is on ‘sibling’.

In the first segment we found out ‘parent’. In the second segment we found out ‘child’ and now what remains is our brother-sister which means ‘sibling’. The elements which are with the element alongside, meaning with the same level of the element. Parent level goes up in ancestors and child level goes down in descendants so we are staying at the current level. So in the current level the elements that are present means the element that are together with them you want to find them out where for that we have methods available to find out siblings in jQuery.

In siblings, the very first method is ‘Siblings’ just as the name suggests. We get a clear clarification in the sibling method that it would return all the siblings which we will look at as well.

After that we have more different methods starting from the next word which are next, next all and  next until and starting from prev word are prev, prev all and prev until. All the methods will be covered in this segment.

Let’s start with siblings first. Siblings is the method in which if we pass an element then we will get all its particular element siblings in return. If I have passed an UL, then all the elements present in that UL level will be passed by siblings. Just as we learnt “parent, children and find'' in the same way we have to use this method as well. After ‘selector' apply siblings which is the name of our method and in the filter, if we want to find any specific sibling then we will pass it in the filter where if not specific but all elements then we will keep it empty.

So, for that, we will do what we did. It is a simple program only. Firstly, we will open sublime text. We can do two things in sublime text like writing a new program or else I will open the previous program which was related to find. I am opening this ‘find’ program.

This is the find program. I will copy it and then paste it. Here, instead of “find” it will come as Siblings. Here also it will come as Siblings. I’ll remove the P,(4 seconds pause, typing)  and add Siblings. There are lots of UL and “H one” in DIV one. Currently I have used Siblings on DIV One. Let’s save this program.. and let’s run it…

So, this is our program. In this program you can see the Main DIV, in which we have DIV, UL. Here are some Siblings which we can see now. We have another UL with this UL on the same level as well H three. So, currently we have applied the “Siblings” method on this “DIV”. Let us see what is returned when we click... There is nothing which is returning. That is because.. there is no sibling of this “DIV” the “DIV one”. So, let’s give an Id to the very first UL which is ‘UL one’…. Let’s copy this and I’ll put it here, inside the UL one.

So, now after saving and reloading this program…, we can see that the siblings of this UL are returning. Meaning this one UL and this another UL.

Now here, I have given UL one to this element and kept the rest UL, H three, empty. Here, let’s give ID UL two and H three one. So if I write UL two and keep it here. Save, reload and click. So, you can see, we are finding elements of this UL. We are getting this UL and this H three, meaning what it indicates is of whomever Sibling you want to find, highlight those siblings. Meaning that particular element whose sibling we have to find out will not be highlighted rather, all the rest Siblings will be highlighted. So, this is our Siblings method which returns the element of the same level, if available will be returned. Here, in this case, after UL we have kept the ‘Siblings’ empty.

Let’s say here I only pass H three then what will be returned? Definitely you must have gotten the idea, only this H three will be highlighted and that is only happened. The link of UL which is H three, will be highlighted. This UL is not highlighted up-till now, because we are searching for a specific element. Same way, instead of H three if I write UL then H three won’t be highlighted but this UL will be. Correct.

If I remove this and put H two then nothing will be highlighted. Because, there is no H two of this UL and there is no sibling of it. So, if we have passed a parameter, then that particular element will be returned. If you have not passed the parameter then all the ‘Siblings’ will get returned.

After ‘Siblings’, comes the next method. As written here, “which next method returns the next sibling of the element”. Meaning ‘the method traverses forward along with the next sibling of DOM’. So, what is the meaning of next? Next will return the next elements of that element. If you consider this example or if you go in the program, this is my UL, this is my second UL.. and this is my H three. Here arrows are not coming. So, if you consider this UL, this UL. So, the next element of this would be the H three and its previous element would be UL. So, the next element, the next method returns all the next methods of this. So, let’s say in this program, this is our UL. Let’s add H one in this DIV. Adding H four, “This is H four”. Let’s add span. “This is a span”. So, the siblings would grow in number.

I have saved this. I ran this program. So here, as you can see there is one H four  then, there is a big UL. There is one more UL, then H three and then span. Because it is a span, it is not visible clearly. Let’s say I replace this with …H five, because it is not a block level element. So, now in all I have five elements.

Let’s say if I run over this, these many siblings have been found out. Now, I’ll copy the same program and will paste it here. Instead of siblings I’ll write next. Save. Next,

Now, we will find out the next element of that particular element. In our case, we have to find out of this element, UL. So, first of all I’ll run this program. This is my next program. Now, if I zoom a little and click on this button, we will see which all elements get highlighted. So, as you can see, the next element of this UL which is H three is highlighted. Meaning, if I have five ‘Siblings’. Sorry, the middle one is the UL. So, it’s two, these two are ‘previous’ ones and these two are next ones. So, if I find “next , '' then I’ll get these two. But, the first one from these two, this one is getting found out.

In the same way, the next element of this UL, “very next element is found out to be this H three. Here, the method traverses forward with the next sibling. Meaning, anything that is next to ‘DOM’ will be returned. So, this is our, actually we firstly checked what it returns with this as an example. So, this is the syntax of it and we have also passed it like this.

Now, here, as you can see there is something written like ‘selector’ in the next parameter. “It is a selector expression to narrow down the search for sibling elements”. So, if I write H three inside next and if I run it,definitely H three will get highlighted which it did. But, let’s say I make it H five and let us see if it gets found out or not. So, you can see, it is not getting found out. Which indicates what does the ‘next method’ find out? It finds out the very next element and will go up-till level one. Meaning, the very next element of this UL will only be found out.

So, we saw the next and its example. So, if next returns only one method then definitely there would be an optional method for it as well which will return everything. So, another objective method is nextall.

If next returns only one element, the very next element then what will next all return? “To return all next siblings of the specified selector”. Meaning the element next to the current selector will all be returned. Just as next works so does next all but, here instead of one element, all the elements are returned.

Syntax of the next all, what is in the filter? After the selector there is nextall. Actually,  “dollar document will come here,” dollar selector. Inside the filter what will we add? If next all returns all of them and we want a particular element from that then we will add the element in the filter or else we don’t need it.

Let’s see an example. We will use the same example of next and will replace next with next all. Initially we will keep it empty. We will save it nextall.

This is my nextall... And here, when I click the button, you can see I want to find out the next elements of this particular UL. That is why all the elements after that have been returning.

If I change the UL to H four. Definitely, you would have got the idea that all the four elements would be highlighted. Perfect. Now, if I remove this H four and make it H two then what all will be highlighted? This UL, this H three and this H five. There is a mistake here, sorry, it will be UL here…. This UL on which we are searching won’t get highlighted. So, three siblings of this UL, the next siblings are getting highlighted. And, since it is next all, all these are getting highlighted.

Now, from these three, if I want to find a particular element then here, I will pass it as a parameter. Let’s say I have passed H three then this should get highlighted. Reload. Click and my only H three is getting highlighted. If I want to highlight H three and H five, so here my H three and H five both are highlighted.

Meaning, next all returns everything but with parameters we can find specific elements as well.

So, this was our next all, one of the methods of next and remaining all the previous finding methods are pending.

So, guys, that is all for this video. Meet you in the second part of this same video and same segment.

Thank you.