jQuery: custom filter selectors

jQuery's custom filter selectors usually take the form of :selector. This kind of selectors can either be used alone or attached to a given element. With the aid of the $.expr[':'] pattern we can actually create our custom filter selectors. For example:

$.expr[':'].floats = function(element) {
  return $(element).css('float') !== 'none';

The above code selects only those elements whose CSS float property is set on a value different from none (that is, the elements are floated). Usage:

var $floats = $('div:floats');
var $notFloats = $('div').not(':floats');

As you can see, our newly created custom filter selector behaves exactly as a normal jQuery's filter selector. For more advanced tests and example, visit http://jquery.malsup.com/expr/.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.