JQuery UI: data selector does not return HTML5 data attributes

Question

JQuery UI: data selector does not return HTML5 data attributes

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 data binding elements some-infowhen this is defined.

I just want to understand why this behavior (is this a mistake?)

$("#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?

Additional info : I am using jQuery 1.9.0 and jQuery UI 1.9.2

** Change **

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

+5

jquery jquery-ui selector

Yanick rochon Jan 30 '13 at 19:06

source share

3 answers

:

$.extend( $.expr[ ":" ], {
    data: $.expr.createPseudo ?
        $.expr.createPseudo(function( dataName ) {
            return function( elem ) {
                return !!$.data( elem, dataName );
            };
        }) :
        // support: jQuery <1.8
        function( elem, i, match ) {
            return !!$.data( elem, match[ 3 ] );
        },