I tried to add data-attribute to class element ( .class ) using this code:
$(".class").data("attribute") === "" ;
and later with this
$(".class").attr('data-sr','');
But that dont work at all. Option1 dont work at all, and option2 work only for tag names in my case. Is something bugged or I am not using something good?
You correctly assign and read data attributes using jQuery's .data() as follows:
// Assign a data attribute
$(selector).data('my-attr', 'test value');
// Read a data attribute
var value = $(selector).data('my-attr');
If you want the data attributes added to the DOM itself, you would use jQuery's attr() as follows:
// Assign a data attribute - note the need to prefix it with "data-"
$(selector).attr('data-my-attr', 'test value');
// Read a data attribute - note the need to prefix it with "data-"
var value = $(selector).attr('data-my-attr');
Examples:
$(function() {
// This value is stored in the jQuery cache object
$(".testclass").data('val', 'something1');
alert($(".testclass").data('val'));
// Alternatively, this value is stored on the DOM element itself
$(".testclass").attr('data-val', 'something2');
alert($(".testclass").attr('data-val'));
});
Just like .attr(), you give two arguments to change the data:
$(".class").data("attribute", "value");
Note that if you add the data with .data rather than .attr, it stores it internally within jQuery, you won't see it as a data-attribute attribute in the DOM. jQuery only uses the data-attribute attribute as an initial source of the value the first time you read it.
