CODEWITHSUNDEEP
jqueryjquery-ui
Anders Lindén
Anders Lindén

Reputation: 7303

:data() selector should be recognized?

I am using jquery-1.11.1 and I try to use the :data selector, described on

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

trying to find all elements having a certain key like this:

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

but all I get is an error saying:

Error: Syntax error, unrecognized expression: unsupported pseudo: data

Shouldn´t there be such a selector?

Upvotes: 7

Views: 3808

Answers (3)

Pete
Pete

Reputation: 10680

I got the error

Error: Syntax error, unrecognized expression: unsupported pseudo: data

because the :data() Selector was not found.

With the Rails Asset Pipeline and Yarn, I needed to add //= require jquery-ui/ui/data to the application.js manifest. This ensures the jquery-ui :data() Selector would be found.

With other build systems like Webpack, you might need to require('jquery-ui/ui/data'), or build against jquery-ui-dist or jquery-ui-bundle. See this answer for more details.

Upvotes: 3

CALEB KPABITEY
CALEB KPABITEY

Reputation: 83

I know this was asked a while ago but for anyone who chances on this you can use a css attribute selector

$('[data-kendoMobileScroller]')

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

You need to include jQuery UI in order to get :data pseudo selector working, e.g:

<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>

Or just extend 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

Upvotes: 13

Related Questions