Selecting element by data attribute
Selecting element by data attribute
Question
Is there an easy and straight-forward method to select elements based on their data
attribute? For example, select all anchors that has data attribute named customerID
which has value of 22
.
I am kind of hesitant to use rel
or other attributes to store such information, but I find it much harder to select an element based on what data is stored in it.
Accepted Answer
$('*[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')
).
Read more… Read less…
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>
Using $('[data-whatever="myvalue"]')
will select anything with html attributes, but in newer jQueries it seems that if you use $(...).data(...)
to attach data, it uses some magic browser thingy and does not affect the html, therefore is not discovered by .find
as indicated in the previous answer.
Verify (tested with 1.7.2+) (also see fiddle): (updated to be more complete)
var $container = $('<div><div id="item1"/><div id="item2"/></div>');
// add html attribute
var $item1 = $('#item1').attr('data-generated', true);
// add as data
var $item2 = $('#item2').data('generated', true);
// create item, add data attribute via jquery
var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);
// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);
// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');
I haven't seen a JavaScript answer without jQuery. Hopefully it helps someone.
var elements = document.querySelectorAll('[data-customerID="22"]');
elements[0].innerHTML = 'it worked!';
<a data-customerID='22'>test</a>
Info:
To select all anchors with the data attribute data-customerID==22
, you should include the a
to limit the scope of the search to only that element type. Doing data attribute searches in a large loop or at high frequency when there are many elements on the page can cause performance issues.
$('a[data-customerID="22"]');
Native JS Examples
Get NodeList of elements
var elem = document.querySelectorAll('[data-id="container"]')
html: <div data-id="container"></div>
Get the first element
var firstElem = document.querySelector('[id="container"]')
html: <div id="container"></div>
Target a collection of nodes which returns a nodelist
document.getElementById('footer').querySelectorAll('[data-id]')
html:
<div class="footer">
<div data-id="12"></div>
<div data-id="22"></div>
</div>
Get elements based on multiple (OR) data values
document.querySelectorAll('[data-section="12"],[data-selection="20"]')
html:
<div data-selection="20"></div>
<div data-section="12"></div>
Get elements based on combined (AND) data values
document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')
html:
<div data-prop1="12" data-prop2="20"></div>
Get items where the value starts with
document.querySelectorAll('[href^="https://"]')