- This topic is empty.
-
AuthorPosts
-
March 21, 2010 at 4:13 am #9342hazem-salamaParticipant
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.March 21, 2010 at 4:14 am #9354mathias-bynensParticipant$('*[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')
).July 26, 2012 at 3:57 am #9352drzausParticipantUsing
$('[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"]');
September 23, 2013 at 4:53 am #9350travis-jParticipantTo select all anchors with the data attribute
data-customerID==22
, you should include thea
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"]');
October 27, 2014 at 9:13 am #9347anton-danilchenkoParticipantThe construction like this:
$('[data-XXX=111]')
isn’t working in Safari 8.0.If you set data attribute this way:
$('div').data('XXX', 111)
, it only works if you set data attribute directly in DOM like this:$('div').attr('data-XXX', 111)
.I think it’s because jQuery team optimized garbage collector to prevent memory leaks and heavy operations on DOM rebuilding on each change data attribute.
December 28, 2014 at 3:48 am #9346user55318ParticipantFor this to work in Chrome the value must not have another pair of quotes.
It only works, for example, like this:
$('a[data-customerID=22]');
March 7, 2015 at 8:03 am #9353jtgParticipantFor 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 containsfoo
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 isthe_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>
July 8, 2015 at 11:26 am #9348razan-paulParticipantvia Jquery filter() method:
http://jsfiddle.net/9n4e1agn/1/
HTML:
<button data-id='1'>One</button> <button data-id='2'>Two</button>
JavaScript:
$(function() { $('button').filter(function(){ return $(this).data("id") == 2}).css({background:'red'}); });
December 29, 2015 at 2:44 am #9351sjoerd-pottuitParticipantI 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:
November 15, 2016 at 7:53 am #9349etoxinParticipantNative 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://"]')
December 9, 2016 at 1:01 am #9345xdsParticipantIt’s sometimes desirable to filter elements based on whether they have data-items attached to them programmatically (aka not via dom-attributes):
$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();
The above works but is not very readable. A better approach is to use a pseudo-selector for testing this sort of thing:
$.expr[":"].hasData = $.expr.createPseudo(function (arg) { return function (domEl) { var $el = $(domEl); return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined"; }; });
Now we can refactor the original statement to something more fluent and readable:
$el.filter(":hasData('foo-bar')").doSomething();
September 20, 2018 at 7:56 am #9344svenParticipantJust to complete all the answers with some features of the ‘living standard’ – By now (in the html5-era) it is possible to do it without an 3rd party libs:
- pure/plain JS with querySelector (uses CSS-selectors):
- select the first in DOM:
document.querySelector('[data-answer="42"],[type="submit"]')
- select all in DOM:
document.querySelectorAll('[data-answer="42"],[type="submit"]')
- select the first in DOM:
- pure/plain CSS
- some specific tags:
[data-answer="42"],[type="submit"]
- all tags with an specific attribute:
[data-answer]
orinput[type]
- some specific tags:
December 6, 2022 at 7:57 am #9343md-afsar-uddinParticipantIt will work 🙂
$(‘.ic-star[data-rate="1"]’).addClass(‘rated’);
- pure/plain JS with querySelector (uses CSS-selectors):
-
AuthorPosts
- You must be logged in to reply to this topic.