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

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. 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.

 Available as a Book:


buy from Amazon

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

Also Available:


buy from Amazon


The jQuery Result Object Revisited

When you start using jQuery one of the first things you learn is how to make use of selectors to extract elements from the DOM. 

For example:


selects all of the <p> elements in a page. 

Often you make use of the extracted elements immediately. For example:


adds a paragraph with content "Hello" after every paragraph extracted by the selector "p". 

Some jQuery operations work on all of the selected elements and some, the majority work on just the first. This all or nothing approach is often exactly what is needed for simple work, but sooner or later you are going to meet a situation where you need to process part of the list of selected elements.

In this case you need to get to know the jQuery result a little better. In fact even if you don't need to process parts of lists of selected elements it is still worth knowing more about the nature of the jQuery result.

The basic ideas of the jQuery result object is covered in an earlier chapter Getting Started With jQuery - The DOM.

But it is worth restating the basics here.

When you write


which is a shorthand for 


the result, in both cases, is a jQuery result object which you can think of as an array like object, complete with all the jQuery methods you already know. 

The important point is that even if:


only matches a single element, the result is still an array like object - of one element in this case. 

The elements of the jQuery result are DOM elements not jQuery objects in their own right. 

That is:


is a jQuery object, but:


is a DOM element, the first in the selection array, and you cannot use any jQuery methods on it.  

If you want make use of jQuery methods on one or more of the array elements then the solution is to wrap the DOM element in a jQuery object. That is:


returns a jQuery object which wraps the first selected paragraph. After this you can do things like


which would append the new paragraph to the first selected paragraph.

One subtle point, but don't let it confuse you, is that when you wrap a single DOM element you still get a jQuery result array object. 

There are some general purpose methods that help with the distinction between a jQuery object and a standard JavaScript array. A jQuery object has lots extra methods over and above a general array but it also lacks some array methods like .pop and .reverse. You can convert any array like object into a true array using .makeArray(obj). For example:


result is a jQuery object and resultArray is a standard JavaScript array. 


Once you have an array of selected elements there is often a need to process all of them in some way. Recall that many jQuery methods simply work on the first array element.

In Getting Started With jQuery - The DOM the array of DOM objects that a selection produced was processed using array indexing and rewrapping.

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++){


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. 

The first is to apply a selector to create a result array that consists of all of the DOM elements that match. 

The second is to 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 




The first is a standard method 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. That is 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 array.
  • filters extract a set of elements in a jQuery array as a new jQuery array.

So for example


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

The command:


does exactly the same thing but in this case the first call to jQuery, i.e. $("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: 


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




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



Last Updated ( Monday, 08 August 2016 )