Home » Jquery » Select elements by HTML5 data attribute in jQuery

Select elements by HTML5 data attribute in jQuery

Posted by: admin November 30, 2017 Leave a comment

Questions:

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

Answers:

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.

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

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

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

Questions:
Answers:

jQuery Mobile recomends the $.fn.jqmData(), for example : $(“div:jqmData(role=’footer’)”)

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

Questions:
Answers:

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