Querying element data (jQuery.data) as attributes

[james_padolsey]

Not sure if this is an "enhancement" or a "feature".

jQuery's attribute selectors ('[prop=val]') currently only supports DOM properties of the element in question, heck, it even let's you query the innerHTML property.

I thought it would make a nice improvement to make it also support querying of element data (added via $(elem).data()). So, when you add a new data key, it's immediately available to query through the familiar attribute selector.

/* Add data */ $(elem).data('ABC', '123');

/* Query within selector */ $('*[ABC=123]');

I've discussed it in more detail here: ​http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/

You can see the code used to implement it at the above URL.

DOM properties will always take precedence over data keys. So if you search for $('a[href^{=​ftp://]') then the DOM property will be checked if it exists, even if there is a data key by the same name ("href").}

Obviously this only works effectively with strings, but the truthy'ness of a data value can also be checked, for example:

/* Add data: */ $(elem).data('active', true);

/* Find active elems: */ $('div[active]');

[robs]

Up, I vote for this

[dmethvin]

I like the idea too, but think it would be better implemented as a :data() pseudo. In particular, if the same syntax is used as attribute selectors it might make it through querySelectorAll mistakenly. However, there may also be implications with warning noise from querySelectorAll, people already whine because both Firefox and Chrome throw console warnings on non-standard pseudos like :checked.

[james_padolsey]

Having tested this recently I can say it definitely is no longer viable. As Dave mentioned, querySelectorAll tries to handle it (technically it's a valid CSS3 attribute selector). :data is a better solution... or just regular filtering using .filter()...

[snover]

Use html5 data- attributes for queryable data.