jQuery Filtering Part2

Jquery Filtering Part 2

Hello guys, welcome to our series Jquery.

Previously we learned about the filtering techniques which is also the last part of traversing and in that we covered two methods called first and last and we are going to continue the same in today’s video as well.

So today’s method is the EQ method .

The methods of our previous video that are the first and last method, what they do is that they return the first and last element from the given element.

But what if I want some element from between and not the first and last one, so for this I have a method called EQ.

EQ basically matches the indexes of the elements and returns one of the middle elements unlike the first and last method which returns the first and last elements only.

For example if I have five elements, they would be named zero to four or if I have ten elements then they would be named zero to nine, here we are using zero instead of one because programming languages always start with zero and not one, so out of these elements EQ would identify one of the middle elements and returns it.

‘The EQ method in Jquery returns an element with the given index.’

This means if I have passed one in the EQ index then my second element would be returned and if I have passed zero then my first element would be returned and if I have passed nine  then my tenth element would be returned.

This means whatever number I pass its plus one would be returned because the index starts with zero.

So if I have two paragraphs and I want the second paragraph then I would pass one in EQ or if I want the fifth paragraph or the fifth division then I will pass four in EQ.

If you want to start from the beginning then give positive numbers or if you want to start from the end then use the negative numbers. So you can use both positive and negative.

Just like first and last, EQ also has a simple syntax. You just have to add EQ and the number inside the index.

Here are some examples, let’s take the same example we took for the first one.

Let’s remove the heading…

I have five labels in total and I would write EQ instead of the first label and I would keep it empty here as of now so that we can see what answer we will get if I don’t pass anything….

Now the program is saved as EQ dot HTML.

Now I will run this program.

Let's say if I click here then none of the parts gets highlighted because we haven’t passed anything.

Now when I pass equal one then as you can see my second portion gets executed that’s because as I said indexing starts with zero.

So this is zero, one, two, three and four.

So if I pass one then my second label gets highlighted and if I replace one with two then my third part gets highlighted...

Now if I want to highlight two parts instead of one.

Then, dollar div…, and I will copy the same thing and keep it here and we would replace it with one and three.

Reload…

So now my second and fourth are getting highlighted.

Now this is EQ, in this we saw that both positive and negative are being accepted, so if I replace one with minus one and instead of three I write a comment.

Reload..

Click…

So as you can see because of minus one my last part is getting highlighted.

Now if I replace minus two with minus one…. and then reload it, the second last gets highlighted.

If the index starts with zero from the top, then it will start with minus one from the bottom because zero has already been allotted to the first one.

So the last one will be allotted minus one, minus two, minus three, minus four and so on. So positive indexes will start from zero and will move in forward direction and negative indexes will start from minus one and move in backward direction.

So if I have to highlight any two then instead of one and three I will have to write minus two and minus four, if I am going in the reverse direction.

This is our one, three and in the backward direction it is minus one and minus two.

So this is EQ, which helps us to get any middle element among multiple elements instead of the first and last one.

So let’s move forward in the slide.

After EQ comes the filter method.

We are seeing filtering methods among them one method is filter method.

Filter method basically works on the basis of some particular selector.

That means we got returns in first, last and EQ. In the first and last we didn’t have to pass the indexes but in EQ we had to pass the index.

It’s not necessary that we would know the indexes every time.

For example, we passed minus one, minus three, two and three etc among five elements.

But what if the data is coming from the server, so we won’t know how much data is coming from the server.

Let’s take the example of students, so it’s not necessary that every class would have fifty students instead sometimes it can be thirty or thirty five, forty one or forty seven, it can be anything.

It is not necessary that every time students' strength in class will be the same as fifty fifty or thirty thirty. It can be possible that less students have taken admission.

There is a possibility that every year we will get a list of different numbers of students.

So in that case, if we have put the EQ at thirty eight then my filtration won’t work because there are only thirty two students.

So in this case it's not possible to work with indexes.

In such a case you have to think that if you don’t have the indexes how will you work?if you have done our css course of learnvern then you would have learned selectors like class and id.

We learned the same thing in HTML.

Class and id are unique, out of which ids are most unique.

So basically when we do this program in relation to any filter then we would add id or class inside the element mandatorily.

So that id or class would help the things to filter out.

Let’s understand this with the help of a program.

This is our sublime text.

We can use this program we created for EQ but let’s do one thing. I will copy and paste it… and then remove the portion after button click as of now. I have some divs here as well.

Let’s remove these portions as well.

Now I would rename the EQ with a filter.

I would add some P tags, some DIV tags and some labels.

So it will go like this..div.., inside DIV…, P,.. ‘This is a… statement’.

And I will copy this div multiple times….

I will take this P as a label….

Here I will keep the P and here label….

We will generate one more DIV…. and write span.

Now let’s save the program.

Now this is our filter.

And let’s run the program…..

As you can see our program is running.

This is our DIV, …here we have a label, then again DIV.

If we check in the code then its P, label, P, label, span.

It is identified currently in this way.

So I can not get an idea of which is a paragraph or which is a label.

So let’s do one thing , let’s apply the filter method.

So here I have to apply something on button click.

So on button click, dollar… P …dot… filter.

And whatever P I get using the filter, I would apply CSS on that so that it appears clearly.

‘background….,  color…, comma’( 5 seconds pause, typing)

Let’s see what output we get from this.

Click

So we didn’t get any output from this.

The reason behind this is that we have to apply a selector after filter though it's written optional there but currently as you can see if I keep it empty then we don’t get any result.

So if I add an element instead of class intentionally in P so after saving and reloading it my two P will get highlighted.

This indicates that I have applied a filter on P.

The P inside which the element is also P will have the background as light coral.

So here my P whose element is also P gets highlighted.

So let’s say in my second P I put a class ‘dot..  paragraph’.

Now I will filter out that P which has a class paragraph.

Now I will save it, reload and then click.

So among all my P only one gets highlighted means out of my two P tag only the second one gets highlighted the one in which I put a class.

So if I write the same P tag again then my two P tags will get highlighted.

So what does filter method do, it based on either class or id will highlight only the elements that we want to find.

So in this case we only filtered out that P tag which is available here.

So we filtered out on the basis of both element and class.

So out of my three P, only two got filtered out which had this class.

This was our filter method.

In the end we have the not method.

Not” method indicates that whatever input we give, we will get the opposite as the output.

Means ‘the not method returns the element that is not matching the specified criteria.’

So if I take the first criteria then only the ones which are not first  will get returned.

If I take the last criteria, then all my elements except the last will be returned.

‘If elements do not match the criteria they are returned.’

So if I have I have given a criteria and the elements which do not match the criteria will get returned.

‘ it is a Jquery inbuilt method and works opposite to the filter method.’

This means that it works opposite to the filter method.

Let’s see its syntax.

Its syntax is, we have to put not inside the selector and after not we have to put criteria.

Though the criteria is written optional, we will consider it as mandatory because if you don’t give a criteria then we won't be able to identify what to put not on .

So it's kind of mandatory that either with a comma separated or without it we have to pass criteria.

So for example, let's say the program we created for a filter in that inside filter we have passed a paragraph.

Means return us those paragraphs that have class paragraphs.

So if I copy this program and paste it here and instead of filter use not then all the elements that have paragraph class will not return instead those elements which do not have paragraph class.

So let’s say we write this DIV P again here.

And after saving it I reload it.

Then if I click here then I will get only the first two in return.

This is because the last two P tags are the tags which have the class paragraph.

So my not method changed all the P tags which had class into “not method.

Means it only considers the top two paragraphs and not the two at the end and has changed it to light coral.

Means if the filter element filters out elements for me then the not method works in the exact opposite way.

Means it gives out the output that satisfies the not of the condition.

So I want to return the P tag that has the paragraph class the not method gives out the P tags that do not have the paragraph class.

So this is our” not method. This is the example we have considered for “not” method.

Now we have completed all the filter related methods.

We learned traversing in jquery and in the same module we learned about filters like first, last or if we want some specific middle element with the help of EQ, filter and not.

All these methods are very useful in website making, while web designing or web site making if we want to highlight something alternatively or if we want to highlight the first or last or if we want to show output based on conditions then these methods would be very useful.

This video along with the previous video covers the entire portion related to filtration.

So guys I request everyone that whatever we have learned in these segments please practice them.

If you face any difficulty while performing the practical then you can tell us about it at forum dot learnvern dot com and if there is any problem related to the segment then also you can tell us about it forum dot learnvern dot com. Discussion to be added..

With our next segment we will start our new module called Ajax, so see you guys in the Ajax module.