Question

Let say I have this piece of HTML :

<div id="container">
   <ul>
       <li><a href="#" data-some-info="foo">Bar</a>
       <!-- repeating a few like the one -->                          -->
       <!-- above for a while ...        -->
   </uL>
</div>

And I want to apply something to all the anchor elements with the data some-info when it is defined.

I just want to understand why this behaviour (is it a bug?)

$("#container").find("a:data(some-info)").size();  // -> 0
$("#container").find("a").data("some-info");       // -> "foo"
$("#container").find("a:data(some-info)").size();  // -> 1 (actual expected val)

Any ideas?

More Info : I’m using jQuery 1.9.0, and jQuery UI 1.9.2

** Edit **

I know about $("#container").find("a[data-some-info]"). This is not what I question here. If there is a data selector, why does it behave this way?

Answer 1

The :data selector is not part of JQuery core. It might be a bug, but the JQuery docs say that HTML5 data attributes are pulled into the internal JQuery data object (presumably on calls to .data) rather than being available as part of a :data pseudo-selector (which according to the JQuery UI docs queries the internal data representation as is and says nothing about HTML5 data attributes)

Alternate approach:

Use $("#container").find("a[data-some-info='foo']"), or for if anything is set on the data attribute, .find("a[data-some-info]").