:data() 选择器应该被识别吗？答案

【问题标题】：:data() selector should be recognized?:data() 选择器应该被识别吗？
【发布时间】：2014-06-23 02:24:45
【问题描述】：

我正在使用 jquery-1.11.1，并尝试使用 :data 选择器，如上所述

https://api.jqueryui.com/data-selector/

试图找到所有具有特定键的元素，如下所示：

var elements = $(':data(kendoMobileScroller)');

但我得到的只是一个错误提示：

错误：语法错误，无法识别的表达式：不支持的伪：数据

不应该有这样的选择器吗？

【问题讨论】：

你包括jQuery UI吗？！因为这是jQuery UI添加的伪选择器，不是jQuery
jQuery 和 jQuery UI 是两个不同的库
请同时添加html
@user25：HTML 与此问题无关。
这个 URL 实际上是一个很好的提示 :)

标签： jquery jquery-ui

【解决方案1】：

您需要包含 jQuery UI 才能使 :data 伪选择器工作，例如：

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

或者只是扩展 jQuery：

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

DEMO

【讨论】：

你知道为什么它包含在jqueryui中而不是jquery中吗？
@AndersLindén 因为这是 jQuery UI 功能，而不是来自 jQuery 核心插件。 jQuery 团队为什么不包含它，只是看他们自己的选择。

【解决方案2】：

我知道这是不久前被问到的，但是对于有机会的任何人，您都可以使用 css 属性选择器

$('[data-kendoMobileScroller]')

【讨论】：

【解决方案3】：

我收到了错误

错误：语法错误，无法识别的表达式：不支持的伪：数据

因为没有找到:data() Selector。

使用 Rails 资产管道和 Yarn，我需要将 //= require jquery-ui/ui/data 添加到 application.js 清单中。这样可以确保找到 jquery-ui :data() Selector。

对于 Webpack 等其他构建系统，您可能需要 require('jquery-ui/ui/data')，或针对 jquery-ui-dist 或 jquery-ui-bundle 构建。 See this answer for more details.

【讨论】：