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时对所有锚元素应用某些内容。

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

$("#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方法查找已存储在元素上的数据。它不会在元素上查找数据属性，我认为它不是为了这个目的。属性等于选择器是您应该使用的。 [data-foo]但请注意，它会查看属性，如果使用jQuery $().data向元素添加数据，如果jQuery不更新属性，则可能与该选择器不匹配。

Answer 2

来自文档，

表达式$( "div:data(foo)")与<div>匹配，如果它通过.data( "foo", value )存储数据

从jquery代码 - ＆gt;

jQuery data()存储在对象内部数据中的单独对象中缓存以避免内部数据与用户定义之间的密钥冲突数据（来自jQuery代码的评论）

https://github.com/jquery/jquery/blob/master/src/data.js#L51

https://github.com/jquery/jquery/blob/master/src/data.js#L63

当它在HTML中定义时，它只是一个用户定义的数据元素，不会被jQuery :data选择器选中。

但是，当您调用.data(some-info)时，它实际上会读取用户定义的数据并将其复制到内部数据，然后使用:data选择元素，因为它可以在内部数据中找到它。 / p>

NOT 是一个错误，因为文档中明确提到了这一点。

您应该使用.length属性来获取选择器中返回元素的数量。

自 jQuery 1.8 以来，{I}也不推荐使用.size。 http://api.jquery.com/size/

Answer 3

：数据选择器不是JQuery核心的一部分。这可能是一个错误，但JQuery文档说HTML5数据属性被拉入内部JQuery数据对象（可能是在调用.data时），而不是作为:data伪选择器的一部分提供（根据JQuery UI文档查询内部数据表示按并且没有说明HTML5数据属性）

替代方法：

使用$("#container").find("a[data-some-info='foo']")，或者如果在数据属性.find("a[data-some-info]")上设置了任何内容，则使用{{1}}。

jQuery UI：数据选择器不返回HTML5数据属性

3 个答案: