My last tutorial on how to create a custom jQuery selector showed you the basics of creating custom filters in jQuery. Now, it is time to get more serious with selectors and create more advanced jQuery selectors – custom jQuery selectors with parameters. To get an idea of what I am talking about think of :contains(someText) selector.
Anyway, let’s create our own jQuery selector that takes arguments. The basic syntax is the same:
$.expr[':'].test = function(obj, index, meta, stack){
/* obj - is a current DOM element
index - the current loop index in stack
meta - meta data about your selector !!!
stack - stack of all elements to loop
Return true to include current element
Return false to explude current element
*/
};
meta is a parameter we are interested in. meta is an array that carries an information about our selector. Here is what it looks like:
$('a:test(argument)');
//meta would carry the following info:
[
':test(argument)', // full selector
'test', // only selector
'', // quotes used
'argument' // parameters
]
$('a:test("arg1, arg2")');
//meta would carry the following info:
[
':test('arg1, arg2')', // full selector
'test', // only selector
'"', // quotes used
'arg1, arg2' // parameters
]
Here as you can see, we can make use of the arrays fourth (meta[3]) value to get a hang of our parameters.
Creating custom jQuery selector with parameters
Now, let’s improve our selector from previous post that selects all links with non empty rel attribute and make it select any element with specified non empty attribute. Here is the code to do just that:
$.expr[':'].withAttr = function(obj, index, meta, stack){
return ($(obj).attr(meta[3]) != '');
};
See it in action here.