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. 

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) includes elements 1, 2 and 3 but excludes 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 results array that has either div or p elements. The filter then removes everything that isn't a p. That is, it produces the result you would have got if you did $("p").

Notice that the filter method only examines each DOM element in the array and 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 reliant 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 traversal 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 set 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 :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.