Selecting an Element with Specific Characteristics - J Query

Problem
You need to select an element based not only on its relationship to other elements or simple attribute values but also on varying characteristics such as programmatic states not expressible as selector expressions.

Solution

If you’re looking for an element with very specific characteristics, selector expressions may not be the best tool. Using jQuery’s DOM filtering method (filter()), you can select elements based on anything expressible with in a function.
The filter method in jQuery allows you to pass either a string (i.e., a selector expression)or a function. If you pass a function, then its return value will define whether certain elements are selected. The function you pass is run against every element in the current selection; every time the function returns false, the corresponding element is removed from the collection, and every time you return true, the corresponding element is not affected (i.e., it remains in the collection):

The preceding code selects all elements with a background image.

The initial collection is of all elements (*); then the filter() method is called with a function. This function will return true when a background Image is specified for the element in question. The !! that you see is a quick way of converting any type in Java-
Script to its Boolean expression. Things that evaluate to false include an empty string,the number zero, the value undefined, the null type, and, of course, the false Boolean it self. If any of these things are returned from querying the background Image, the function will return false, thus removing any elements without background images from the collection. Most of what I just said is not unique to jQuery; it’s just JavaScript fundamentals.
In fact, the !! is not necessary because jQuery evaluates the return value into a Boolean it self, but keeping it there is still a good idea; anyone looking at your code can be absolutely sure of what you intended (it aids readability).
Within the function you pass to filter(), you can refer to the current element via the this keyword. To make it into a jQuery object (so you can access and perform jQuery methods), simply wrap it in the jQuery function:

Here are some other filtering examples to spark your imagination:

Discussion

There will always be several different ways to do something; this is no less true when selecting elements with jQuery. The key differential is usually going to be speed; someway's are fast, others are slow. When you use a complicated selector, you should bethinking about how much processing jQuery has to do in the background. A longer and more complex selector will take longer to return results. jQuery’s native method scan sometimes be much faster than using a single selector, plus there’s the added benefit of readability. Compare these two techniques:

The second technique is shorter and much more readable than the first. Testing in Firefox (v3) and Safari (v4) reveals that it’s also faster than the first technique.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics