Duck Punched Filter

This hacked version of the jQuery filter method allows for more control over filtering through a set of elements

This element should be red
This element should have a gray background
This element should be red with a yellow background
This element should be blue with a yellow background
This element should be red with a gray background
This element should be bold

The first filter gives a basic function that gets called on every iteration of the loop

// Simple filter using enhancements
jQuery.filters.MyFilter = function( elem, i, object ) {
	if ( elem.getAttribute( object.attr ) == object.value ) {
		return true;
	}
};

The second filter loops through the element stack and creates a new stack from within

// Full control over the set of elements
jQuery.filters.MyBetterFilter = function( elems, object ) {
	var newStack = [], i = -1, l = elems.length;
	for ( ; ++i < l; ) {
		if ( elems[ i ].getAttribute( object.attr ) == object.value ) {
			newStack.push( elems[ i ] );
		}
	}

	return newStack;
};

And here's the list of filters used

// Color the elements
elements.filter( [ { attr: 'data-color', value: 'red' } ], 'MyFilter' ).css( 'color', 'red' );
elements.filter( [ { attr: 'data-color', value: 'blue' } ], jQuery.filters.MyFilter ).css( 'color', 'blue' );

// Give full control of array to the filter
elements.filter( true, [ { attr: 'data-background', value: 'yellow' } ], 'MyFilter' ).css( 'background', 'yellow' );

// Use an anonymous function with full control (no need to pass params, since we are within same scope)
elements.filter( true, function( elems ) {
	var newStack = [], i = -1, l = elems.length;
	for ( ; ++i < l; ) {
		if ( elems[ i ].getAttribute( 'data-background' ) == 'gray' ) {
			newStack.push( elems[ i ] );
		}
	}

	return newStack;
})
.css( 'background', 'gray' );

// Use the old filter method as intended
elements.filter('[data-bold=yes]').css( 'font-weight', 'bold' );

Back to Original Article