Bug Tracker

Opened 11 years ago

Closed 10 years ago

#4590 closed feature (wontfix)

Querying element data (jQuery.data) as attributes

Reported by: james_padolsey Owned by:
Priority: minor Milestone: 1.4
Component: data Version: 1.3.2
Keywords: Cc:
Blocked by: Blocking:


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]');

Change History (4)

comment:1 Changed 10 years ago by robs

Up, I vote for this

comment:2 Changed 10 years ago by 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.

comment:3 Changed 10 years ago by 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()...

comment:4 Changed 10 years ago by snover

Resolution: wontfix
Status: newclosed

Use html5 data- attributes for queryable data.

Note: See TracTickets for help on using tickets.