Select elements by HTML5 data attribute in jQuery

Question

Is it possible to select elements in jQuery by their HTML5 data attributes (for example, all <div> with data-role='footer')?

@Sep - That's actually not "how jQuery would do it", it will hand it off to a querySelectorAll() call if possible (and it will with an attribute selector here), not loop through the DOM itself...unless there's no other way (e.g. a custom non-CSS selector used) — Nick Craver
– Nick Craver, Commented Feb 14, 2011 at 15:03

Nick Craver · Accepted Answer · 2011-02-14 14:43:19Z

96

You can select on a data- attribute like any other attribute...using an attribute selector. In this case you want the attribute-equals selector, like this:

$("div[data-role='footer']")

They are handled specially in consumption by jQuery, e.g. allowing .data() to fetch from them with correct typing...but as far as DOM traversal goes, they're just another attribute, so think of them as such when writing selectors.

answered Feb 14, 2011 at 14:43

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user113716 · Accepted Answer · 2011-02-14 14:43:25Z

9

$('div[data-role="footer"]')

This simply uses the the attribute-equals-selector^(docs).

There are several attribute selectors you can use (among the others).

answered Feb 14, 2011 at 14:43

user113716

323k64 gold badges454 silver badges441 bronze badges

Comments

danpop · Accepted Answer · 2012-07-25 12:08:06Z

5

jQuery Mobile recomends the $.fn.jqmData(), for example : $("div:jqmData(role='footer')")

Source: http://jquerymobile.com/test/docs/api/methods.html

answered Jul 25, 2012 at 12:08

danpop

99713 silver badges26 bronze badges

Comments

darthwade · Accepted Answer · 2015-08-21 22:48:09Z

0

jQuery & Zepto integration: https://github.com/kossnocorp/role

answered Aug 21, 2015 at 22:48

darthwade

1,4241 gold badge10 silver badges5 bronze badges

Collectives™ on Stack Overflow

Select elements by HTML5 data attribute in jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related