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>
Solution 3
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"]');
Solution 4
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:
Solution 5
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"]');
![Hazem Salama](https://i.stack.imgur.com/Mei94.jpg?s=256&g=1)
Hazem Salama
Data Science, JavaScript, Python, R, and hopefully someday Lisp. BS and MS in Computer Science and a Graduate Certificate in Data Science
Updated on February 11, 2021Comments
-
Hazem Salama over 3 years
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 namedcustomerID
which has value of22
.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.-
goodeye over 9 yearsSee also stackoverflow.com/q/4191386/292060
-
Avatar over 4 yearsThat's what helped me to select all data attributes (regardless the value):
$('*[data-customerID]')
You can use it with e.g.$('*[data-customerID]').each( function() { ... });
-
-
James McCormack almost 13 yearsJust a note that .data('foo') works to get the value of a 'data-foo' attribute since jQuery 1.4.3. Also, since jQuery 1.6: .data('fooBar') gets attribute 'data-foo-bar'.
-
drzaus almost 12 yearsaha - turns out someone else points this out at stackoverflow.com/questions/4191386/…
-
drzaus almost 12 yearsand offers a solution with
.filter
here -
Tomas Ramirez Sarduy over 11 yearsit uses some magic browser thingy and does not affect the html: there is no such thing as magic ;) learningjquery.com/2011/09/using-jquerys-data-apis
-
drzaus over 11 years
-
drzaus over 11 yearsIt might not have been apparent from my answer, but it's worth noting that if you change the value with
.data(...)
, it does not change the htmldata-
attribute, so if you did the following -- [ 1)<i data-icon="star"></i>
2)$('[data-icon="star"]).data('icon', 'circle')
] -- performing the filter$('[data-icon="star"]')
again would find the original element. -
Darkside over 10 yearsAlso if you are interested only in presence of specific data attribute, you could do this:
$('[data-customerID]')
-
Pedro Moreira about 10 yearsIf you are adding a data attribute that you need to find later, use
$item.attr('data-id', 10);
-
drzaus about 10 years@PedroMoreira - unless I'm misreading your reply, you missed the point of my answer -- you can't find it later if you set it via
.data
. You could set it viaattr
, but then it's not really "data" and can only be used for DOM traversal. Compare the effects of$('#comment-21628443').data('zaus-reply', 'yes')
and$('#comment-21628443').attr('data-zaus-reply', 'no')
--$('#comment-21628443').data('zaus-reply')
will yield 'yes' but$('[data-zaus-reply="yes"')
can't be found. -
Pedro Moreira about 10 yearsIt's working for me!
$('#comment-21628443').attr('data-x', 5)
then$('[data-x="5"]')
finds it, then$('#comment-21628443').data()
printsObject {x: 5}
-
drzaus about 10 years@PedroMoreira yes but your example is backwards from the scenario I'm pointing out in my answer -- try
$('#comment-21628443').data('x', 5)
instead then$('[data-x="5"]')
and you get nothing. I'll add some more detail to try to make it clearer. -
drzaus about 10 yearshm...@PedroMoreira weird, I could have sworn your original comment didn't involve setting the attribute. I was incorrect in saying "it can only be used for DOM traversal" -- you're right, you can access the data later. But be warned: if you later change it via
data
you'll be left with the "stale" value in the attribute even though$el.data()
returns the right value, which could be confusing. -
Pedro Moreira about 10 yearsYes, I already know that. data() can't be used to set data attributes, they must be set with attr() so they stick in the html. It's ok to retreive them later with data() though.
-
Razan Paul almost 9 yearsDid you try the fiddle? FIlter method is just another approach to achieve the same thing. It can be useful when you already have a set of Jquery objects and you need to filter based on data attribute or anything else.
-
Peter B almost 9 yearsMy apologies, @Blizzard. I've commented on the wrong answer. Pasted it to the right one now. #AlwaysALongDayAtWork
-
Peter B almost 9 yearsThis appears to be incorrect. At least it isn't correct now. I've just used $('[data-action="setStatus"]').removeClass('disabled'); in Chrome and it works perfectly.
-
drzaus over 8 years@TomSarduy I still love getting reminders about this question -- you couldn't have provided a better setup for my comment; I really was hoping I'd get to use that quote...
-
sam about 8 yearsGood. Note that
~=
matches whitespace-separated words whereas*=
matches any substring. -
Martin R. about 7 yearsThis doesn't work, if the data field was set by jquery (using
.data()
), right? -
Animesh Singh about 7 yearsI guess there is no use of "" inside the selector, it can be used as
$('[data-action=setStatus]').removeClass('disabled')
-
Jarda almost 7 yearsThis helped me a lot - if I used the data or prop methods, then selection by $('...[data-x="y"]') was not working - I used attr instead (it pushes the attribute change to the DOM). Thx
-
Salma Gomaa almost 7 yearsThe first solution misses the return statement, it needs to be: $el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();
-
GuyPaddock over 4 yearsThe selector for "get the first element" is correct but not consistent with the other examples -- I believe it's missing "data-".