Selecting element by data attribute with jQuery
Solution 1:
$('*[data-customerID="22"]');
You should be able to omit the *
, but if I recall correctly, depending on which jQuery version you’re using, this might give faulty results.
Note that for compatibility with the Selectors API (document.querySelector{,all}
), the quotes around the attribute value (22
) may not be omitted in this case.
Also, if you work with data attributes a lot in your jQuery scripts, you might want to consider using the HTML5 custom data attributes plugin. This allows you to write even more readable code by using .dataAttr('foo')
, and results in a smaller file size after minification (compared to using .attr('data-foo')
).
Solution 2:
For people Googling and want more general rules about selecting with data-attributes:
$("[data-test]")
will select any element that merely has the data attribute (no matter the value of the attribute). Including:
<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>
$('[data-test~="foo"]')
will select any element where the data attribute contains foo
but doesn't have to be exact, such as:
<div data-test="foo">Exact Matches</div>
<div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>
$('[data-test="the_exact_value"]')
will select any element where the data attribute exact value is the_exact_value
, for example:
<div data-test="the_exact_value">Exact Matches</div>
but not
<div data-test="the_exact_value foo">This won't match</div>