jQuery 用户界面 :data selector does not return HTML5 data attributes

Question

假设我有这段 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>

我想在定义数据 some-info 时将某些内容应用于所有 anchor 元素。

我只是想了解为什么会出现这种行为(这是一个错误吗？)

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

有什么想法吗？

更多信息:我正在使用 jQuery 1.9.0 和 jQuery UI 1.9.2

** 编辑 **

我知道关于$("#container").find("a[data-some-info]")。这不是我在这里问的问题。如果有data selector ，为什么会这样？

Answer 1

这就是选择器的实现方式:

$.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 ] );
        },

(引用https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.core.js#L160)

请注意它如何使用 $.data 而不是 $(elem).data。这意味着它仅查找通过 $.data 或 $().data 方法存储在元素上的数据。它不会查找元素上的数据属性，我不认为它是用于此目的。您应该使用属性 equals 选择器。 [data-foo] 但请注意，它会查看属性，如果您使用 jQuery 的 $().data 将数据添加到元素，则它可能与该选择器不匹配，如果 jQuery不更新属性。