CODEWITHSUNDEEP
javascriptjqueryattributescustom-data-attribute
Jens
Jens

Reputation: 324

Does element.attributes contain custom data-attributes?

I was wondering if there is browser consistency what elements are stored in the attributes array.

Is all "data-xxx" attributes found through "$('#elm')[0].attributes"?

For example does the attributes-collection contain all the data-attributes below:

 <input type="submit" value="Go" data-validation="foo" data-widgetId="bar">

What I need is a way of moving all relevant attributes from an input[type=submit] to a button-element with jQuery.

Upvotes: 1

Views: 341

Answers (3)

James Kyburz
James Kyburz

Reputation: 14473

I think the data attributes are present in all browsers even if they are ignored in the case of non HTML 5 browsers

Here someone managed to read them from an element in IE6 Do HTML5 custom data attributes “work” in IE 6?

@edited answer

just found that jquery data() works with both html5 and non html5 browers;

http://www.sluniverse.com/ffn/index.php/2011/02/using-html5s-data-attributes-with-jquery/ 

example of looping through all data attributes;

<input type="text" id="x" data-a="valuea", data-b="valueb" />
$.each($('#x').data(), function(key, value) { 
  console.log('key is', key);
  console.log('value is', value);
});            

prints         

key is a
value is valuea
key is b
value is valueb

Upvotes: 1

Spudley
Spudley

Reputation: 168755

Not many browsers currently have native support for the dataset property, which is the offical standard way to access data-* attributes. This will improve over time, but for now it's not well enough supported to use (see http://caniuse.com/#search=dataset for more).

However as you know all browsers can support data-* as normal attributes. But in the absence of the dataset property, there isn't an easy way to grab all the data-* attributes.

Fortunately, there is a JQuery plugin which provides this functionality. See here for more info: http://www.orangesoda.net/jquery.dataset.html

Upvotes: 0

ChrisThompson
ChrisThompson

Reputation: 2008

Browser support information regarding .attributes HERE

    var attrs = $("input[type=submit]")[0].attributes;
    for(var i=0;i<attrs.length;i++) {
        alert(attrs[i].nodeName + " = " + attrs[i].nodeValue);
    }

Upvotes: 0

Related Questions