|jQuery 3 - Filters|
|Written by Ian Elliot|
|Monday, 08 August 2016|
Page 3 of 3
There are a range of other filters which have been added to jQuery in a fairly ad-hoc way. They are useful but they don't fit into any neat patterns or families - they are just useful.
selects elements in the process of animation at the time the selector is run. Clearly this one isn't really a filter on the results array as it is tied to the time that the query is run. However it is still faster to use
selects all elements that contain the specified text. The match can be within the element or within any child element. For example :contains(jQuery) will return results that contain the string jQuery with that capitalization.
selects all elements that are disabled at the time the query is run.
selects all elements that are enabled at the time the query is run.
selects the element that has the current focus. Again this isn't really a filter on the result array because it matters when the query is run.
selects all header elements h1,h2 and so on. This one is convertible to a true filter and it is better to use
selects all image elements
Selects all elements with a language attribute as specified. It also extracts elements contained within language specific elements on the assumption that they inherit the language setting unless it is overridden.
Selects the root element of the document - usually html.
Selects all elements that are selected at the time of the query
Selects the element with the id that matches any fragment identifier in the URL. That is if the URL is www.mysite.com/#mycontrol then :target selects the element, if any, with an id of mycontrol.
Select all elements visible at the time the query is run
There are more miscellaneous filters but the line between filter and selector starts to be increasingly blurred.
After all is :header a selector or a filter?
There is a tendency in jQuery to call any non-standard selector a filter and this can be confusing.
Thre are also selectors that work with forms and these are discussed in chapter 8. For completeness these are:
The Filter Stack
This is the final twist in the filter story.
If you have been following the description of how filters work then you will appreciate the idea that filters take one jQuery result array and convert it into another filtered result array. What hasn't been mentioned until now is that each time you create a new result array using a filter the old original unfiltered result array is kept just in case you want to use it again. You can restore the old result array in a number of ways, but the simplest is to use the .end() method.
produces a result array containing all of the p elements. We can use the eq filter to reduce this to just the first p element and add some text:
If we now use .end we can return to the result array that had the entire set of p elements
Now we can filter again and add some text to the second p element;
You can continue in this way using .end to return to a previous result array when ever you need to.
Usually this is about as complicated as it gets but each jQuery object maintains a stack of previous results so .end().end() returns to the result that you had before two filtering operations.
Of course an alternative to using end() is to simply keep the intermediate results:
The end function and the stack simply makes it possible for you to do the same thing but using a fluent approach.
As well as end() there is also addBack(selector) method which filters the current result and then adds it to the new results. This is of course a silly operation to perform if the filter doesn't select additional elements - there is no point in eliminating some of the elements and then adding them back. This means that it really only makes sense to use it after a traversal filter.
first selects all p elements, then selects all of the immediate parent div elements and then adds the original p elements back to the result array - note you get all of the p elements.
You can also add a selector to filter the elements that are added back to the results:
adds only the first p element back to the results.
If you want to be really advanced there is also the .pushstack() method that will push an array of elements on the results stack and .remove() which pops anything added back off the stack.
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 result 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 also 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:
Both of which return the concatenated text of the first 10 paragraphs.
Which is best?
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.
Now Available as a Print Book:
You can buy it from:
The Core UI
Now Available as a Print Book:
You can buy it from:
Events, Async & AJAX
To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin, or sign up for our weekly newsletter.
|Last Updated ( Monday, 08 August 2016 )|