How to get, set and select elements with data attributes?
To reflect the values of the Attributes immediately in the DOM you can use .attr()
$('#element').attr('data-data1', '1'); // Sets the attribute
$('#element[data-data1="1"]') // Selects the element with data-data1 attribute'
$('#element').data('data1'); // Gets the value of the attribute
$('#element').attr('data-data1'); // Gets the value of the attribute
In plain Javascript you can try this
var elem = document.getElementById('element');
elem.setAttribute('data-data1', '1'); // Set the attribute
elem.getAttribute('data-data1'); // Gets the attribute
All of the answers are correct, but I want to state something that nobody else did.
The jQuery data
method acts like a getter for html5 data attributes, but the setter does not alter the data-* attribute.
So, If you manually added the data (as is stated in your comment), then you can use a css attribute selector to select your element :
$('#element[data-data1=1]')
but if you have added (altered) the data via jQuery, then the above solution won't work.
Here's an example of this failure :
var div = $('<div />').data('key','value');
alert(div.data('key') == div.attr('data-key'));// it will be false
So the workaround is to filter the collection by checking the jQuery data value to match the desired one :
// replace key & value with own strings
$('selector').filter(function(i, el){
return $(this).data('key') == 'value';
});
So, in order to overcome these issues, you need to use the html5 dataset attributes (via jQuery's attr
methos) as getters and setters :
$('selector').attr('data-' + key, value);
or you can use a custom expression that filters jQuery internal data
:
$.expr[':'].data = function(elem, index, m) {
// Remove ":data(" and the trailing ")" from the match, as these parts aren't needed:
m[0] = m[0].replace(/:data\(|\)$/g, '');
var regex = new RegExp('([\'"]?)((?:\\\\\\1|.)+?)\\1(,|$)', 'g'),
// Retrieve data key:
key = regex.exec( m[0] )[2],
// Retrieve data value to test against:
val = regex.exec( m[0] );
if (val) {
val = val[2];
}
// If a value was passed then we test for it, otherwise we test that the value evaluates to true:
return val ? $(elem).data(key) == val : !!$(elem).data(key);
};
and use it like :
$('selector:data(key,value)')
Update
I know this thread is a few years old, but since it has some activity, it's worth mentioning that doing this using the querySelector
dom API (with no need for jQuery) is quite trivial:
document.querySelectorAll('[attribute=value]')
// Set
$('#element').attr('data-value', 'value');
// Get
var value = $('#element').attr('data-value');
// Select
var elem = $('#element[data-value = "' +value+ '"]');