25

The html object:

 <div data-myAttribute="test"></div>

The code:

 var $o = $("div");

 $.each($o.data(),function(k,v){
    console.log(k); 
    //writes 'myattribute' instead of 'myAttribute'
 });

How do I preserve the case of the attribute?

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Control Freak
  • 12,965
  • 30
  • 94
  • 145
  • 7
    You should use `data-my-attribute` to get `.data('myAttribute')` – A. Wolff Dec 08 '14 at 13:51
  • 1
    have a look [here](http://stackoverflow.com/q/7641551/4202224) – empiric Dec 08 '14 at 13:52
  • @A.Wolff Thank you, that seemed to help me. Despite the fact it *can't be used* according to the answers. – Control Freak Dec 08 '14 at 16:07
  • 3
    @ControlFreak `data-my-attribute` is perfectly valid attribute name regarding spec: `For each name on the list, for each U+002D HYPHEN-MINUS character (-) in the name that is followed by a character in the range U+0061 to U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z), remove the U+002D HYPHEN-MINUS character (-) and replace the character that followed it by the same character converted to ASCII uppercase.` – A. Wolff Dec 08 '14 at 16:40
  • @A.Wolff I'd put your comments as an answer, since it answers the intent of the OP (and also matches what I wanted) – Brian J Dec 08 '14 at 20:06

4 Answers4

38

Valid HTML data attributes can't contain uppercase characters anyway:

From the W3:

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

j08691
  • 204,283
  • 31
  • 260
  • 272
14

You can't. Attribute names are always lowercase in HTML5.

Scimonster
  • 32,893
  • 9
  • 77
  • 89
10

If your goal is to target myAttribute as key of dataset property, you should use data-my-attribute:

<div data-my-attribute="test"></div>

See following link regarding camelCased rule: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

PS: as Izkata commented it:

For reference for others, jquery also does conversion such that $div.data('my-attribute') returns the same thing as $div.data('myAttribute'). The vanilla javascript dataset property does not do this.

Community
  • 1
  • 1
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • I chose your answer because it was useful and did what I needed done. Thanks. – Control Freak Dec 09 '14 at 00:36
  • 2
    For reference for others, jquery also does conversion such that `$div.data('my-attribute')` returns the same thing as `$div.data('myAttribute')`. The vanilla javascript `dataset` property does not do this. – Izkata Dec 09 '14 at 01:03
5

As an addendum to @A. Wolff's answer, you can apply a -- to the data attribute name if you want leading capitals.

<div data--my-attribute="test"></div>

Will result in a data key of MyAttribute

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202