Data attribute name with digits

Question

Is it expected that for

<div data-foo-42="bar"></div>

div the div.data() would be an empty object?

Demo: http://jsfiddle.net/nWCKt/

What are the requirements for data- attributes names?

Created a ticket in jquery bug tracker: http://bugs.jquery.com/ticket/14376

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). — Arun P Johny
– Arun P Johny, Commented Sep 20, 2013 at 4:16
Using data() you can access the attribute like so: div.data("foo-42") rather than div.attr("div-foo-42") - does that help? — andrewb
– andrewb, Commented Sep 20, 2013 at 4:18
@zerkms it looks to be a bug in the jQuery data method(in the dataAttr method) — Arun P Johny
– Arun P Johny, Commented Sep 20, 2013 at 4:39

PSL · Accepted Answer · 2013-09-20 14:20:28Z

Seems like a jquery issue to me. The regex that replaces key is causing the issue when there is a numeric value after a hyphen separator of the attribute (Other than the first hyphen for data-). They need a way to identify numeric values that start after the attribute on a multidash data attribute.

Snippet from jquery:

function dataAttr( elem, key, data ) {
    // If nothing was found internally, try to fetch any
    // data from the HTML5 data-* attribute
    if ( data === undefined && elem.nodeType === 1 ) {

        var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); 

        data = elem.getAttribute( name );

         ....

and another one which converts data attrib name to the key used in the above place which actually converts the key to camelcase rdashAlpha = -([\da-z]), and the second replacement (.replace( rdashAlpha, fcamelCase );) considers a numeric value after a separator to be a part of the prev separator. This probably is the core culprit which ignores numeric start after second dash.

camelCase: function( string ) {
        return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
    },

Here key becomes foo42 and while replacing it with rmultiDash (which is /[A-Z]/) becomes foo42 so there is no attribute with the name data-foo42 it is data-foo-42 instead. I think they need to have some identifier (similar to capitalization of the key for the first char after hash) to represent starting numerals after the hash.

<div  data-foo-42="bar" data-foo-tfs="tf"></div>

returns {fooYui: "bar"} skips the first attribute.

<div data-foo-d42="bar" data-foo-YUI="bar"></div>

returns {fooD42: "bar", fooYui: "bar"}

using jquery 1.10.1

Collectives™ on Stack Overflow

Data attribute name with digits

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related