Filter Strategies

One of the most confusing things about filters is that it is often possible to do the same job with a selector.

For example, you might start out with a selector that picks out all of the div and p elements and then filter the result down to just the p elements. Clearly you could have extracted just the p elements in the first place. 

If you have a choice of how to obtain a particular result then there are a number of things that should guide you. The first is to use standard CSS selectors in preference to jQuery extended selectors. Standard CSS selectors are supported by the browser and much faster. 

It is generally faster to search the entire DOM as few times as possible. This means that if you can extract a results array and then use a filter to narrow it down to what you want this is likely to be faster. The filter only accesses the elements of the results array and not the entire DOM. Obviously if you can extract a results array once and get different sub-sets from it by applying a filter this is going to be faster.

There are, however, times when only a filter will do the job. For example, if you want to get the text from the first ten paragraphs in a document you have to use either:

$("p:lt(10)").text();

or:

$("p").slice(0,10).text();

both of which return the concatenated text of the first 10 paragraphs.  

Which is better?

The answer depends on the number of paragraphs in the entire document. The first performs a slow, non-CSS standard, selector on the text but the second extracts all of the paragraph elements, which could number thousands and then reduces it to just ten. In practice there seems to be little difference between the two using a modern browser.   

Example

Returning to the generated web page introduced at the end of Chapter 3 with a repeated structure consisting of multiple divs:

     <div>
            <h1>First Item</h1>
            <p>long description of item.</p>
            <h2>Warning note</h2>
            <p>more text</p> 
            <hr>
     </div>

Now the problem is that to make things stand out we want to set the background color of the even divs to be red and the odd divs to be green. The problem is that we don’t know how to set the background color because this is introduced in Chapter 7. However, it is very easy:

.css('background-color', 'red')

sets the color to red.

We can do the job with two filters and making use of the results stack:

$("div").filter(":even").
      css('background-color', 'red').end()    
        .filter(":odd").
          css('background-color', 'green'); 

This works by first getting a results object that has all of the div elements. Next we filter the result to leave only the even divs and set their background color to red. After resetting the result object back to the full set of divs using the .end method, a second filter is applied which filters the odd divs and sets their background to green. The result may not be pretty, but it was easy:

Summary

• You can refine a results set using a filter which keeps or removes elements from the initial results.

• Filters are generally available in two forms, either method or selector.

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

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

• The add filter is unusual in that it will add elements to the result by applying a selector to the DOM.

• There are a great many filters in jQuery and not all of them conform to the general idea of a filter. There is a tendency to call anything that isn’t a standard selector a filter.

• The results of a set of chained function calls form a stack which can be manipulated using the .end method which returns the results to the previous results object.

 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

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info

<ASIN:1871962501>

<ASIN:1871962528>

<ASIN:1871962560>