Sporadically, over the course of each month, we’ll post a “Dissecting jQuery” video quick tip. The idea behind these is that we’ll take a single chunk of the jQuery source at a time, break it down, and determine exactly what’s going on under the hood, so to speak. Then, with that knowledge, we’ll learn how to better utilize the library in our coding. Today, we’ll review filters.

Also available in this series:

1. Dissecting jQuery – Filters
2. Dissecting jQuery – The Text Method

jQuery’s Source for the :hidden Filter

 
jQuery.expr.filters.hidden = function( elem ) { 
		var width = elem.offsetWidth, height = elem.offsetHeight, 
			skip = elem.nodeName.toLowerCase() === "tr"; 
 
		return width === 0 && height === 0 && !skip ? 
			true : 
			width > 0 && height > 0 && !skip ? 
				false : 
				jQuery.curCSS(elem, "display") === "none"; 
	};

The :visible Filter

Quite cleverly, the :visible filter only needs to call the hidden method, and return the reciprocal.

 
jQuery.expr.filters.visible = function( elem ) { 
	return !jQuery.expr.filters.hidden( elem ); 
};

Full Screencast

);"> jQuery source code to view a listing of other helpful filters that are available to you.

Harnessing this Knowledge to Extend jQuery

 
<script> 
	$('p:first').data('info', 'value'); // populates $'s data object to have something to work with 
 
	$.extend( 
		jQuery.expr[":"], { 
			block: function(elem) { 
				return $(elem).css("display") === "block"; 
			}, 
 
			hasData : function(elem) { 
				return !$.isEmptyObject( $(elem).data() ); 
			} 
		} 
	); 
 
	$("p:hasData").text("has data"); // grabs paras that have data attached 
	$("p:block").text("are block level"); // grabs only paragraphs that have a display of "block" 
</script>

Note: jQuery.expr[':'] is simply an alias for jQuery.expr.filters.