jQuery traversing siblings part2

In the previous segment we learnt three methods to find siblings which are siblings, next and next all, along with it cleared siblings basics.

Today we will see about nextuntil and previous related methods.

First is our nextuntil method. What is nextuntil method?

In nextuntil like in previous segment we saw next returns the very next element of current element meaning that if there was ul just beside it was h three so the value returned was h three.

Nextall returns all elements coming after particular element

What will nextuntil do next?  As its name can give us an idea what nextuntil does.

Nextuntil returns the next element from our selector which we are finding but to one specific element means here we have to give a stopping element.

That is till where we have to find the element.

In this example, here in nextall case, if with UL i apply nextall… then we get three elements

Here I'll add the next parameter in nextuntil case where I want the next element till this ul or till h three or h five.

So basically what nextuntil does is whatever element I passed in parenthesis sorry whatever element has been passed it will search till that element is passed.

Similarly just like how our others syntaxes are the same way there is nextuntil syntax.

Here we only take a stop. Stop is optional here, definitely if I don’t pass any stopping element inside nextuntil then what will happen?

Until the end all the elements will be returned to me but if I pass the stopping element then will stop till there.

Hence our parameters for nextuntil.

Stop particular elements for what we have to find.

Filter is also optional here. We can give a particular element of nextuntil meaning whatever our stop element is searching till there and which one to search? The filter given in the element. Clear?

NOW lets see an example of this.

I’ll paste the previous example. And in that I’ve added h three and h five. For suppose I’ll add h six… This is h six.

And I’ll once again add h one…. This is h five.

There comes our nextuntil…..And we’ll run this program…..

So you can see our program in which so many elements have been added.  This our h four and our original ul one more ul h three h five ,h six and one h one.

What we will do now is we will apply click on this. So currently in this program we haven’t done nextall. Nextall is here only.

Here comes our nextuntil…. We have passed the UL in nextuntil. So definitely our very first ul will be passed.

I clicked and siblings of this ul will be returned to us.

Now in this ul of nextuntil I’ll pass the stopping portion that is the first parameter and in that I pass h five. Okay?

So my h five passed. Reload.

What happened now is that starting from this ul to this h5 all the siblings in between were returned to me because I gave  a stopping parameter.

But instead of h five I’ll give h six then h five will be also covered in that. Okay?

So that is ul h three and h five.

Now our second scenario. We can add an optional parameter in nextuntil of stopping one till where we have to search.

After that comes our filter, one that till where we have to search and which element we want.

Let’s say that I want to search till h six which I have typed here. And I want “h three.

Then I’ll put a comma here and pass h three…. So, you can see that search has happened till h six but returned till h three.

This indicates that nextuntil will search till the first parameter we entered and we gave a second parameter of what to search that is being highlighted here.

If I remove this,… till h six all is returned to me that is my nextuntil.

What next does is that it returns the very next element. This didn’t work here because we might have given an element which doesn’t exist.

We gave ul two here this is my ul two… So my ul two…. next elements.

Nextall after so and so element all the others

And nextuntil after so and so element till one parameter it returns.

Hence, here ends our nextuntil. And all the next methods also end here.

Now our previous methods start. That is whatever we did till now we have to do the opposite of that.

Opposite how? In the opposite direction.

If in “next we move in the forward direction then in the previous direction we will move in the backward direction.

If our very next sibling were being found out so now our very previous sibling will be found out.

So if seen in this example, this ul the very next h three h five , h six and h one is there so similar to this ul very previous our ul this h four is there.

I’m repeating this ul the very next h three h five, h six and h one is there so similar to this ul very previous our ul this h four is there.

So this is our previous. Like how next was the opposite of that. It will return us siblings only but previous elements of the current element.

Here it will move in the backward direction of the dome whereas next will move in forward direction.

Just like how the next methods were there we have syntaxes for the same.

We have to add a previous and selector which is optional used to narrow down searching.Okay?

This is a simple example of what we did in “ next.

So I’ll copy this program next program and instead of next we’ll write P R E V previous. And we’ll run this program.

This is my previous program; in our program we are searching previous above ul two. So lets say if I click here then the very previous element of this ul that is the big ul is being highlighted.

What does next do it returns the next method but only one method returns the very next element same way it is in ul.

What the previous method will do is the very previous first element which is matched will be returned to us.

SO next and previous returns only one element.

This is our previous method.

It is easy to understand so we can understand quickly.

Similar to prev is the next is prevall which is opposite to nextall.

Nextall returns after the forward element of a particular element but prevall returns before a particular element that is all elements in backward direction.

Syntax of this is also similar to nextall. Prevall our syntax and filter parameter optional if we want a particular element from the previous element then we’ll pass it here in filter. If not then no problem.

So we’ll copy our nextall program and paste here then instead of nextall P R E V A L L and here we looked on ul.

I’ll remove ul and h….. No we’ll keep it ul two only. Save….; Run.

This is our program. Here I’ll click and you can see that we applied on ul two so before this ul both the first ul and first h four are highlighted.

Means previous all elements of ul are returned to us.

This is our prevall. We have a parameter option available in prevall if we want a specific element we can write that.

So lets say in prevall I have one h four so if I write here h four and only click for h four.

Then for this ul previous two elements or siblings are there from that only one h four that is being matched which I have passed in parameter  so that is returned to me.

Hence this is the second scenario in prevall that if we want to search specific elements from previously available elements then how we can search that.

In this way by passing one parameter like we did here. Okay?

So this is our prevall. We have our last method after prevall that means we have a lot of siblings from that previous element on which we have applied selector if we want to go till any one element means we are giving restrictions.

Like in nextuntil we took one element till where we had to search same way here prevuntil meaning we have to search till previous particular element

So what we will pass here is the stopping element. Okay?

Stopping element indicates where we have to search in the previous element.

Filter is optional.

We’ll see a program for that.

We’ll copy the nextuntil program and I’ll close the rest and paste it here…prevuntil.

We have given prevuntil till h six but as of now I’ll remove and save it…. Prevuntil.

Here many elements which we made in that code above ul we applied prevuntil. So our ul is here only.

Basically only one element should be searched. And there is ul here also this should also be searched.

I’ll click and both these two parts are covered because this ul previous element is h four and of this another ul previous element is this ul.

Let’s say I’ll apply this on h five…. Reload.

As soon as I applied prevuntil on h five and I haven’t given stopping element so all the four is returned to me.

But if I give a stopping element to ul. Okay. So what will I get?…

So I passed my stopping parameter ul of this h five that’s why all the parameters in between are returned to me and only one element is h three.

Instead of my starting element h five I do h six or h one then I’m getting three returned.

Meaning starting from this h one to this ul all the elements are returned to me that means by giving stopping element all the elements before stopping elements are returned.

Now, in between these two that is h one previous element and till ul from that I want to search a particular element let's say “h five.

I’ll pass that by adding a comma…. Save; Reload …and click.

So that particular element is also returned to me means prevuntil returns us two things.

Two options are available for us that is either you can search till one particular element and can also search elements in between that particular element.

Same as nextuntil. This was our prevuntil.

We covered the program for that.

So guys! Here our sibling traverse segment gets over here.

We covered how to search siblings, how to find next, all next that is nextall, till one particular that is next until.

Now backward direction that is prev, all previous that is prevall, till one particular that is prev until.

That is a total of 7 methods we covered in siblings in both this and previous video.

So guys total of both the videos there are 7 practicals and practice all that.

While running all these programs if you face any difficulty you can tell us on FORUM.LEARNVERN.COM.

We’ll revert to you with answers to all your questions. Discussion to be added.

Let’s meet in the next segment. Our next segment is on filtering.

So see you in the next segment.

Thank you!