jQuery Filtering Part1

Hello guys! Welcome to our series of jQuery. In our previous segment we have completed the siblings point of jQuery Traversing of our current module.

Before that we have learnt about how to find out parents, children and siblings of particular elements in jQuery. So, in that way we’ll move forward with traversing.

In the siblings segment there were so many methods in which we have seen how to find all siblings.

I hope you have at least once done the practicals of all methods.

We will move forward with today’s segment. This one is the last topic in jQuery Traversing Filtering, but with this it isn’t the end of jQuery, only traversing the topic will be over.

Last topic is filtering. With the help of the word itself you can understand filtering.

We will take a real life example of filtering. If you are making tea, if you do not filter it while pouring it then tea leaves will also be poured into your cup. So, it is mandatory to filter tea to get only tea, the same way if you have two elements together and you need only one element from that for that we use some filtering techniques.

In jQuery also if you want to filter in traversing so there are some techniques available and we will be seeing a few techniques in this video or segment that will help in filtering elements.

We will be seeing five methods in jQuery for filtering which are first, last, eq, filter and not. Every method name indicates what is the use of it.

We will be seeing each and every method one by one. We’ll start with the very first method. Okay?

With the help of names only you can understand what the first method does.

First method returns the very first element from the selected elements. Okay?

Means If I have ten labels so from those ten labels, the first label will be returned. If I have ten h one from those whichever is first will be returned to me.

Its syntax is also simple. We need a selector element means if I need the first label from labels then in selector, I will write labels. If I need the first span from ten span or five span then I will write span here.

So, whatever I need first, I will write here. Okay?

Here, like in previous syntax we will not add in the first parameter instead we will write what we need first in place of selector or element.

Example is simple. Let’s say I take “p here if I need the very first p and I have to highlight it also.

So, this first will return the very first element but we have to write some CSS above the returned first element by which we will be able to show what means we have to highlight it and that indication we will do by this CSS part. Okay?

Let’s start this segment or practical.

First of all, I’ll open sublime text… and in place of plain text take HTML….

And in my HTML inside the title write an example… First, add a library script… or dollar( 5 seconds pause, typing)  and we have readied the portion where we will write the script.

And here will come style, in style first of all in body write text align center… and this is my h one which will indicate example first because we do all things on button click.

So, I’ll take a button… here click my id is button and here down we will add a few things.

First, we will save this much portion first when we save a program in our jQuery folder in traversing. This is our first program so first dot HTML.

I’ll run this program now and right now there is nothing here.

Let’s take some labels and then we will indicate those labels from whichever is the first label that we have to identify so in this program first of all after BR tag I’ll add labels.

So, let’s say label… slash label…. Here I will write… “this is label one”. I have written this a total of five times now…. This label two.., label three.., label four.., label 5...

Now the label is not a block level element as you can see when I save it all labels come side by side so for making these block labels, we will write all labels under a div.( 4 seconds pause, typing) Okay?

This is my first label, my second label, third label, fourth one… and fifth one. Save and reload.

Now all my labels will come below every other label. So, what I will do is that I’ll give some CSS to my div such as border one PX solid green and background color …light green and text align center.. padding two PX and margin… five PX.

Now let’s see how our program looks like? So this looks proper now.

These are my labels, all my labels, buttons and this first are there. Okay?

What we have to do now is that when we click on the click button then from these labels the very first one should be highlighted.

Ideally, we can see it but when we have too much data and if there is no indication which is the first one in that case, we have to apply the first method.

So, what I have to do is I want the first label so I’ll write here dollar… label… dot.. first. Save and reload.

I clicked here and I'm getting it returned but we can’t see it so here I have to do something due to which it is highlighted.

I’ll add here CSS. I have to apply two CSS but we will do only one background color using a comma. I'll take light coral here. Save and reload.

This is working without the click button because I haven’t fired it above button click.

So here control X dollar hashtag button dot click function. Okay?

On click function it is highlighting but I don’t want it like this. I need to get it completely dew. So, let’s say my label is the first label. What I can do is remove this first control Z and instead of the first label we will take the div. okay?

What happens here is that instead of finding the first label it is finding the first div.

So, whichever is my very first div that is getting highlighted. Okay? So, in the very first div here… okay or by adding comma color… and here will come white…. Okay?

This now looks proper because if we see it from a web designing perspective, we are learning jQuery so along with it we are focusing on designing also.

Here you can see that when I click on the button then the very first div is returned to me.

If this is my first method, meaning the first method to get the element opposite of this, if I want to get the last very element of the selected elements so for that, what I will do is use the last method.

Means first returns first element and last returns last element. I will copy my first method program and paste it and wherever in place of first I will write last. Save last.

This my last I’ll run that program in this program what should happen when I click is that my last div should be highlighted. So, I clicked and my last division was highlighted.

Hence, first gets me first element and last gets me last element and this was our simple thing first will give first and last will give last.

Now based on first and last there is one more thing. First we wrote multiple divs. If ahead of this I’ll add h three tags like h three this is heading. Then what will happen. Okay.

So, I’m searching last after this is heading and then if I click, I’ll get the last label.

Now if I remove this heading part from here and write in the first part of the heading that is where my first program is.

What is happening now is that here ahead of this label there is one more thing meaning I’ve applied an element before this div. Still I get this div only that indicates in the first method what we have mentioned will only return which the first element is.

So, if I tried to get the first div then I’ll get the first div only by adding this heading there won’t be any change. This heading won’t be detected, only this label will be detected.

So, in case of first and last is that whatever element we will mention in the selector portion then that element’s first and last will only be returned to us. If we add anything in between it will not affect as they are different elements.

The selector we applied of that first and last element will be returned to us.

Today we will keep only up to first and last in this particular segment. Still there are 3 more methods which are left.

In today’s video we learnt about the first and last method. In the next video we will learn about the remaining three methods related to filtering.

So, guys! Keep practicing and we will meet in the next video.

Thank you!