jQuery 3 - Filters
Written by Ian Elliot   
Monday, 08 August 2016
Article Index
jQuery 3 - Filters
Simple filters
More Filters


Method v Selector Filters

The difference between the two forms of filter is completely down to where they are applied.

You can use .eq() to repeatedly filter down a result array, to get different elements each time, but :eq returns a single filtered result. 

That is you could do something like

var result=$('p');
for(var i=0;i<result.length;i++){
   
result.eq(i).text(i.toString());
}

To add a string to each of the elements of the result.

While you could use the selector form it would mean having to build up a suitable string and making the query multiple times.

The rule is:

  • use the method form of a filter, e.g. .eq(i) if you need to process an existing array or process an array multiple times

  • use the selector form of a filter, e.g. :eq(i) if you only need to apply the filter once and never need the full unfiltered result. 

There is also another subtle difference between the two forms of the filter. The selector filters are applied before the array is fully constructed i.e. at the time that the DOM is being searched and therefore there can be performance differences. That is they modify the standard CSS selectors rather than filter the array. This also means that some selector filters can do things that method filters can't as we will see. 

Now you might be saying that the selector form of a filter isn't really a filter as defined earlier because it doesn't actually filter down an existing array - it limits the array that is being built. If you want to think of them as separate things then this is fine because at an implementation level they are but they conceptually do the same sort of job. That is you can imagine :eq(i) working by constructing the results array and then dropping every element but the ith element. 

justjquery

Meet The Filters

As well as the eq() filter there are also a number of other index based filters.

Unfortunately, they don't all come in two versions, method and selector, and this makes the list less regular than it could have been. 

 

:eq(i) or .eq(i)     filters the element with index i
:lt(n)  or .slice(0,n)   filters all elements from 0 to <n
:gt(n) or .slice(n+1) 

  filters all elements from  I>n 
  to the end of   the array

:first  or .first()     same as eq(0)
:last  or  .last()   same as eq(-1)
:even or .filter(":even")    selects all elements with even index
:odd  or  .filter(":odd")     selects all elements with odd index

                    

You can use negative indexes to work from the end of the array rather than the start. 

Some of these filters are worth looking at in more detail.

:lt, :gt and Slice

Although the :lt and :gt filters do not have method equivalents there is a method that does both of their jobs and more:

.slice(start,end)

returns the portion of the array from start to end. An important point is that the element specified by end isn't included in the filtered set. That is .slice(1,4) filters elements 1, 2 and 3 but not 4.

If you don't specify end then it returns from start to the end of the array.

You can easily see that, as indicated in the table;

.slice(n+1) is the same as :gt(n)

and

.slice(0,n) is the same as :lt(n)

If you want to be complete then .slice(i,i+1) is the same as .eq(i) but it is better to use .eq. 

In general it is better to use a standard CSS selector to extract an array of DOM objects and then use .slice to pull out the elements you really want than to use :gt and :lt because CSS selectors are faster than ones modified by :gt and :lt.

Filter

The filter(selector) method is really powerful because it can be used to convert any selector into a filter. Notice that you can write any valid selector as the argument to filter and it will be applied to each of the array elements in turn and a new results array will be constructed consisting of only those elements that are selected. 

For example:

$("div,p").filter("p");

first creates a result array that has either div or p elements. The filter then removes everything that isn't a p i.e. it produces the result you would have got if you did $("p").

Notice that the filter method only examines the each DOM element in the array there is no further searching of the DOM to find elements that match. For example, $("p") returns an array of all of the paragraph elements in the document but .filter("p") returns only the paragraph elements already in the result set.

Filter is a powerful method and you can quickly become very relient on making use of it. It also has another form where you can supply a function that does the filtering and this is described in the next chapter on advanced filtering.   

:odd and :even

It is odd, pun intended, that :even and :odd don't have method equivalents. There is no obvious reason for this but given the .filter method can convert any selector into a filter this isn't a problem. For example:

$("p").filter(":odd");

returns a jQuery array of odd indexed paragraph elements and

$("p").filter(":even");

returns a jQuery array of even indexed paragraph elements.

 

Not Filters

As well as these index based filters there are a few that are based on other conditions. The not filters are perhaps the most potentially confusing because what they do is in principle simple but there are some important differences between :not() and .not()

The idea is very simple:

:not(selector) or .not(selector)

both filter a selection to the elements that do not match the selector. Of course in both cases you have to be careful what the set is that the "not" is applied to. 

For example:

$("p,div:not(div)").append("<p>Hello2</p>");

selects all p and div elements and then filters out the div elements - a pointless exercise but it demonstrates the idea.

The expression

 $("p,div").not("div").append("<p>Hello2</p>");

does exactly the same job but the initial query returns an array of p and div elements first. 

You can use any selector in the not filter and this potentially makes it very complicated. Also notice the obvious fact that you don't enclose the selector in :not in quotes - the whole thing is already in quotes.

It is also better to use .not because :not isn't a standard selector and so can be slower.

The .not method has some additional ways it can be called. In particular you can specify another jQuery object to be removed and you can specify a function to determine what to remove.

The Add Filter

The add filter is a little strange in that it doesn't remove elements from the results array it adds them.

There are a number of forms of this filter depending on what you give it to specify what should be added. 

You can use any jQuery selector and the results will be added to the existing results array.

That is the:

.add(selector)

method adds the jQuery object that results from evaluating the selector to the existing selection. The complication is that the selector can be almost anything that would create a jQuery result when used in $(selector).

So for example

$("p").add("div");

adds all the div elements in the document to the array of p elements. That is it gives you the same result as:

$("p,div")

It is surprising that the add method performs a full selection on the document and this makes it more powerful than you might expect.

A simpler use of the add method is to add existing or constructed objects. For example:

result3=result1.add(result2);

will add the elements in result2 to the elements in result1 to give a unified result list. 

You can also add constructed objects using HTML:

$("p").add("<p>hello</p>");

adds the HTML as an element to the results array as a new results array.

The add method can sometimes be useful when you are trying to build up a list of elements that satisfy complex conditions.  



Last Updated ( Monday, 08 August 2016 )