This is a relatively simple idea. Select elements with data-attributes that match a pattern, for example, div[data-media-*]. The problem is, CSS selectors don;t allow you to wildcard attributes themselves so we need to be creative.
We will extend the Slick selector engine with a data pseudo selector, which will look at the outerHTML of the element and find a match for the attrbute, starting with data-value*:
Slick.definePseudo('data', function(value){ // wildcard data-startswith search var outer = this.outerHTML || new XMLSerializer().serializeToString(this); return outer.test('data-' + value); }); console.log($$("div:data(media-)")); // return all divs with data-media-* attribute
This is it at a first reading. Now, given how performance is important, especially if used on a large DOM without a qualified selector, let’s see if we can optimise it by using a closure where the setup takes place. We will cache the strings we reuse so no new strings need to be made for each element passed to Slick, as well as a single instance of the XMLSerializer, used by the fallback when outerHTML is not available. We also go to Array.join instead of string concatenate for small gains in IE6/7/8
(function(){ // cache reusable strings var data = 'data', hyphen = '-', // set the fallback via XMLSerializer, if no outerHTML (eg. FF 2 - 10) XS = this.XMLSerializer && new XMLSerializer(); Slick.definePseudo(data, function(value){ return (this.outerHTML || XS.serializeToString(this)).test([data, value].join(hyphen)); }); }());
Happy coding.
GitHub flavoured markdown enabled.