0

I've used

var activeFilter = $('<li></li>').data('input-id', 'mycustomId');
$('#container').append(activeFilter);

Now I need to get the particular < li > element out of multiple < li > elements in known < ul >.

However the obvious selector doesn't work.

var existing = $('li[data-input-id=mycustomId]');
alert(existing.length);

Useful links: .prop() vs .attr() How to get, set and select elements with data attributes?

Summary:

.prop() sets/gets DOM properties.. e.g. className

.attr() sets/gets TAG ATTRIBUTES.. e.g. class, thus making selectors $('obj[class=xxx]') possible.

.data() sets/gets jQuery internal Cache attributes and doesn't map onto attributes or properties.

HOWEVER, in html5 ATTRIBUTES set with .attr() and containing prefix "data-" are being correctly accessible with .data(), BUT NOT VICE VERSA!!

http://jsfiddle.net/wjEvM/

In debugger there is NO property data-input-id listed, but it's accessible through

$('#container li:firstchild').data('input-id');

The question is how do I get (which selector do I have to use) the li (object i.e.) with given value of dataset, like obj.getChildWithData('data-id', 'mycustomId'); OTHER THAN in a loop checking each li's dataset. Or using stupid document.querySelectorAll, because it doesn't do what is needed.

Please explain if applicable if it supposed to work so. Getting data-* attributes set as attributes doesn't allow me to use .data() which is recommended by html5. So I want go get it right.

Community
  • 1
  • 1
Max
  • 1,463
  • 5
  • 19
  • 34

2 Answers2

2

You are using attribute selector here, this works if you set your HTML5 data as this:

activeFilter.attr('data-input-id', 'mycustomId');

But, you should acces it using correct synthax:

$('#container li:firstchild').data('inputId');

And to answer to your comment, you can retrieve it using .filter():

var existing = $('li').filter(function(){return $(this).data('inputId') === "mycustomId"});

SEE DEMO

A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • the question is how to get an object with given value, set with .data() – Max Apr 23 '13 at 13:56
  • 1
    This. Goin_13 describes this issue well here: http://stackoverflow.com/a/13276132. Setting the data via jquery like you have done does not actually add a data attribute that you can query. – huwiler Apr 23 '13 at 14:10
  • @gr9zev If you don't care where your data is stored, then using `.data()` and `.filter()` would work great, but if you want the `data-*` attribute on the DOM node, then you can't use `.data()`, as pointed out by links in my answer and in huwiler's comment. – ajp15243 Apr 23 '13 at 14:30
  • @roasted thank you, that's an acceptable solution!! however to set a point on this, what's the real difference between .attr() and .prop() in context of data-*. Can we use both? Must we use the first in favor of second.. any pointers about performance and standatds? – Max Apr 23 '13 at 14:47
0

Unfortunately for your method, jQuery does not store data set via .data() in the DOM node's data attribute (see this question).

Instead, you'll want to set it with .attr(), and then you can use $('li[data-input-id=mycustomId]'):

$('<li></li>').attr('data-input-id', 'mycustomId');
Community
  • 1
  • 1
ajp15243
  • 7,704
  • 1
  • 32
  • 38
  • attr is deprecated by the way. But thanks for a small piece about jquery cache. – Max Apr 23 '13 at 13:58
  • 2
    @gr9zev `.attr()` isn't deprecated, its use cases have simply been constrained to be more "within scope", so that it is not misused/confused with `.prop()`. The attr docs explain all of that towards the top, and since the `data` attribute is an actual DOM node attribute, and not a property on the DOM node's object, you should use attr (according to how I'm reading the docs, at least). – ajp15243 Apr 23 '13 at 14:02
  • @gr9zev I would love to see where that's documented. – Ian Apr 23 '13 at 14:08
  • okay, said that, could you shed some light on the real difference between .prop('data-mydata') and .attr('data-mydata')? – Max Apr 23 '13 at 14:50
  • 1
    @gr9zev There's a pretty thorough answer [here](http://stackoverflow.com/questions/5874652/prop-vs-attr) about `.prop()` vs `.attr()`. I think you're going to want to use `.attr()`, since that will directly set DOM node attributes in the markup, which sounds like what you want to do with `data-*`. – ajp15243 Apr 23 '13 at 14:59