Selecting element by data attribute
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.
$('*[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') ).
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"]');
上一篇: .prop（）vs .attr（）
下一篇: 通过数据属性选择元素