Can I filter by values set with jQuery.data -

i want use .filter function against large number of elements i'm checking data-* attribute, set .data method.

the problem jquery selector use original value. if set data value using $('whatever').data('key', newvalue) , try use selector $('[data-key=newvalue]') nothing found.

here's test html:

<div id="test" data-dummy="foo"></div> <div id="result"</div> 

then:

$('#test').data('dummy', 'bar');  $('#result').     append('<div>where dummy=foo: ' + $('[data-dummy="foo"]').length + '</div>').     append('<div>where dummy=bar: ' + $('[data-dummy="bar"]').length + '</div>'); 

outputs:

where dummy=foo :1

where dummy=bar :0

it looks like, selector engine, original value used in selectors.

update - cheers initial answers, on purpose. .data starts data-* values, sets own copy. don't want replace every call .data( call .attr('data-' +.

to work around i'm using .filter function, filter run large numbers of elements don't want create new jquery object each match. sort of circumstance jquery provides global functions.

basically should able use $.data(element, instead of $(element).data(, doesn't work either: $.data(element, returns undefined.

so code ends .filter(function(){return $.data(this, key) === value;})

however appears before jquery object initialised:

var domele = document.getelementbyid('test'); var globalbefore = $.data(domele, 'dummy'); var first = $(domele).data('dummy'); var globalafter = $.data(domele, 'dummy');  $('#result').     append('<div>$.data before: ' + globalbefore + '</div>').     append('<div>new $(): ' + first + '</div>').     append('<div>$.data after: ' + globalafter + '</div>'); 

outputs:

$.data before: undefined

new $(): foo

$.data after: foo

weird. never mind, question can work around it? there way initialise whatever's happening new $ object without creating 1 every tested node?

js fiddle demo: http://jsfiddle.net/ku4th/

it's not bug, it's confusingly-designed behavior.

the problem jquery selector seems use original value. if set data value using $('whatever').data('key', newvalue) , try use selector $('[data-key=newvalue]') nothing found.

that's because data never sets data-* attributes, initializes them. it's assymetrical (reads them doesn't write them).

to update attribute, use attr. e.g., instead of:

$('whatever').data('key', newvalue); 

you need

$('whatever').attr('data-key', newvalue); 

if want both set data and attribute:

$('whatever').data('key', newvalue).attr('data-key', newvalue); 

data associates key/value pairs of data elements using jquery-managed cache of objects. if ask data key doesn't exist in element's data cache, looks see if key matches data-* attribute and, if so, initializes data cache value. @ point, there no further connection between data , data-* attribute.

the reason data doesn't write attributes @ least partially down fact can store anything via data, whereas of course attribute values strings. instance, if do:

$("whatever").data('key', {     nice:   "complex",     obj:    "here",     answer: 42,     when:   new date() }); 

...then later $("whatever").data('key') give object. object cannot stored in attribute.

you're not, far, first person burned surprising design. :-)

---

basically should able use $.data(element, instead of $(element).data(, doesn't work either: $.data(element, returns undefined.

right. documentation $.data tells why:

note: low-level method; more convenient .data() available.

regarding html5 data-* attributes: low-level method not retrieve data-* attributes unless more convenient .data() method has retrieved them.

you've said don't want replace calls data calls attr, have seems best situation, can use data-* attributes in selectors.

alternately, can this:

matchingelements.filter(function(){     return ($.data(this, key) || this.getattribute('data-' + key)) === value; }); 

...which first looks @ data data and, if gets falsey value (undefined, null, "", false, nan, or 0), goes , gets attribute element instead. if want limit undefined:

matchingelements.filter(function(){     var value = $.data(this, key);     return typeof value === "undefined" ? this.getattribute('data-' + key) : value; });