Edit Question - KnowledgeHub

Title Body

Given an arbitrary HTML element with zero or more data-* attributes, how can one retrieve a list of key-value pairs for the data. E.g. given this: <div id='prod' data-id='10' data-cat='toy' data-cid='42'>blah</div> I would like to be able to programmatically retrieve this: { "id":10, "cat":"toy", "cid":42 } Using jQuery (v1.4.3), accessing the individual bits of data using $.data() is simple if the keys are known in advance, but it is not obvious how one can do so with arbitrary sets of data. I'm looking for a 'simple' jQuery solution if one exists, but would not mind a lower level approach otherwise. I had a go at trying to to parse $('#prod').attributes but my lack of javascript-fu is letting me down. update customdata does what I need. However, including a jQuery plugin just for a fraction of its functionality seemed like an overkill. Eyeballing the source helped me fix my own code (and improved my javascript-fu). Here's the solution I came up with: function getDataAttributes(node) { var d = {}, re_dataAttr = /^data\-(.+)$/; $.each(node.get(0).attributes, function(index, attr) { if (re_dataAttr.test(attr.nodeName)) { var key = attr.nodeName.match(re_dataAttr)[1]; d[key] = attr.nodeValue; } }); return d; } update 2 As demonstrated in the accepted answer, the solution is trivial with jQuery (>=1.4.4). $('#prod').data() would return the required data dict.

Tags (comma-separated) Cancel