Filters are often confused with selectors, but they are quite different and serve the important purpose of discovering the things that a simple selector cannot.

This is an extract from my book Just jQuery The Core UI.

 Available as a Book:

buy from Amazon

1. Understanding jQuery
2. Basic jQuery CSS Selectors
      Extract: The DOM
3. More Selectors
      Extract: Basic Selectors
4. The JQuery Object
5. Filters 
6. DOM Traversal Filters 
7. Modifying DOM Objects
      Extract: Modifying The DOM 
8. Creating Objects & Modifying The DOM Hierarchy
   
9. Working With Data
      Extract: Data ***NEW!!!
10. Forms 
11. Function Queues
12. Animation 
13. jQuery UI
14. jQuery UI Custom Control
15. Easy Plugins 
16. Testing With QUnit
17. Epilog A Bonus Function

Also Available:

buy from Amazon

Mastering the core of jQuery is first a matter of understanding how to find particular elements and then changing them in some way. The main way to find specific elements is to make use of selectors, which is sometimes difficult. You can refine a results set using a filter which keeps or removes elements from the initial results. Filters are often confused with selectors, but they are quite different and serve the important purpose of discovering the things that a simple selector cannot.

Filters

Once you have an array of selected elements there is often a need to process all of them in some way. In earlier chapters the array of DOM objects that a selection produced was processed using array indexing and re-wrapping.

For example, you could use a for loop to step through each element of a selected set of elements:

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

In this case a different number is added to each of the paragraphs. 

There is a slightly more elegant was of manipulating the jQuery result array. You can apply filters to narrow down the elements that operations apply to. You can think of this as a two-stage process of getting the list of elements you actually want to work with:

1. Apply a selector to create a result array that consists of all of the DOM elements that match

2. Apply a filter to the result array that selects the element that are to be processed

There are generally two ways to write a filter, as part of the selector or as a separate operation.

For example, you can pick out a particular element in the array using either: 

.eq(i)

or:

:eq(i)

The first is a standard function call and the second is a special string that can be included in the selector. In both cases i is the index of the array element you want and negative indexes are taken to be relative to the end of the array. This means that eq(0) is the first element and eq(-1) is the last element. 

That is:

• Selectors extract a set of DOM elements from the DOM as a jQuery results array.

• Filters extract a set of elements in a jQuery results array as a new jQuery array.

So, for example:

$("p").eq(0).append("<p>Hello</p>");

first selects all the paragraph elements and returns an array of results, the eq method then trims this array down to just the first element and creates a new array containing only it. Then the append method adds a new paragraph to just this element. 

The command:

$("p:eq(0)").append("<p>Hello2</p>");

does exactly the same thing, but in this case in the first call to jQuery, the selector in $("p:eq(0)"), returns the array already trimmed down to a single element.

Notice that both forms are easier to use than using an array index because: 

$("p")[0];

is a DOM object rather than a jQuery result array, but: 

$("p").eq(0);

and

$("p:eq(0)");

are jQuery result objects and you don't need to re-wrap them. 

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 results array, to get different elements each time, but :eq returns a single filtered result. 

That is, to add a string to each of the elements of the result, you could do something like:

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

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 .eq(i), the method form of a filter, if you need to process an existing array or process an array multiple times

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

There is 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 can therefore lead to 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 cannot, as we will see. 

You might now argue 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, instead it limits the array that is being built.

If you want to think of selector filters as separate things then this is fine because at an implementation level they are, but conceptually they 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 i^th element.