jQuery :data() selector filter

Jump to actual plugin
I have been using jQuery for quite some time now and one of the thing I really like about it is the .data() function. Using this function you can easily add data to elements without cluttering the DOM. I.e. if we want to store the old value of a textbox before updating it with some auto completed value, we can do the following:

$('#textboxId').data('oldValue', $('#textboxId').val() ).updateWithAutocomplete();

Then we can easily get the old value back like this:

$('#textboxId').data('oldValue');

For when the user decides that the autocomplete suggestion is wrong or something. You can even add objects as data:

$('#someElem').data('anObject', {aKey: 23, inner:{ foo: 'bar' } });

However jQuery does not provide a method to query objects for data. If you want to check which elements have certain data specified or have it with a certain value you will have to loop over all elements and check them using an if statement. With this plugin this is no longer necessary. You can add a :data() filter to the selector and only elements matching the selector will be returned. The filter works very similar to the [attribute] filter. The following syntax is supported:

$('selector:data("foo")'); //Matches all elements that have .data('foo') defined.
$('selector:data("foo=bar")'); //Matches all elements that have .data('foo')=='bar'
$('selector:data("foo!=bar")'); //Matches all elements that have .data('foo')!='bar' NOTE that it still only matches elements that have .data('foo') defined.
$('selector:data("foo^=bar")'); //Matches all elements whos value for .data('foo') starts with 'bar'. i.e. .data('foo')=='barfoo' is matched but .data('foo')=='qwertbarfoo' not
$('selector:data("foo$=bar")'); //Matches all elements whos value for .data('foo') ends with 'bar'. i.e. .data('foo')=='foobar' is matched but .data('foo')=='foobarqwerty' not
$('selector:data("foo*=bar")'); //Matches all elements whos value for .data('foo') contains 'bar'. i.e. .data('foo')=='foobarqwerty' is matched

Becuase .data() can also hold objects you can also query for dataobject properties. You can use all the same selectors as above and specify object properties as dataKey.property.property etc. i.e.

$('selector:data("foo.bar")'); //Matches all elements that have .data('foo').bar defined.
$('selector:data("foo.bar.x^=hai")'); //Matches all elements whos value for .data('foo').bar.x starts with 'hai'
//Etc. =. !=,$= and *= are also supported

You can download and view the source of this plugin at my google code project.