have jQuery ignore case in attribute/data names?

Question

We're using HTML5's data-* attributes for some of our client side interaction set up. jQuery uses these to do its thing.

The catch is that the HTML coming in may vary. Obviously this is the problem that should be fixed but I'm not always in control of the HTML being produced, unfortunately.

The question:

Given these two tags:

<a data-sampleAttributeName="example">

<a data-sampleattributename="example">

Is there a clever way to treat them as one and the same?

The best I've come up with is something like this:

var theAttribute = ($myobject).data('sampleAttributeName');

if (($myobject).data('sampleAttributeName')){
    theAttribute = ($myobject).data('sampleAttributeName')
} else {
    theAttribute = ($myobject).data('sampleattributename')
}

I could turn that into a function that I could just pass the camelCase version to and check for both as well. I was just wondering if there was a cleaner built-in feature in jQuery to ignore the case of the data (or attr) value.

Hari Pachuveetil · Accepted Answer · 2011-10-03T23:35:26.717

28

For both the variations given here you should get the value using

.data('sampleattributename')

The camel casing ( .data('sampleAttributeName')) is for when the attribute is like this:

<a  data-sample-attribute-name="something">Anchor</a>

Check this jsfiddle

edited Oct 03 '11 at 23:35

answered Oct 03 '11 at 23:04

Hari Pachuveetil

10,294
3
45
68

That doesn't seem to work. the all-lowercase jQuery returns undefined when the html attribute itself is camel cased. – DA. Oct 03 '11 at 23:10
Which browser are you using? For me on Firefox, I get two alerts of `example` in this jsFiddle - http://jsfiddle.net/FloydPink/yhvDG/1/ – Hari Pachuveetil Oct 03 '11 at 23:14
The undefined you are seeing is from `$(this).id` which should be `this.id` – Mottie Oct 03 '11 at 23:32
@fudgey: Ah, I did not even notice the `undefined` there. I have corrected and updated the working fiddle to the answer. Thank you! – Hari Pachuveetil Oct 03 '11 at 23:34
1

Hmm...yep, you're right. I get two on that page as well. I must have something else going on too. Anyways, your point is valid and makes me think that this really shouldn't be solved on my end. The HTML needs to be consistent. – DA. Oct 03 '11 at 23:50
Like @fudgey noted, the undefined you were seeing is because of incorrect `$(this).id` I had in the fiddle initially. I have modified the fiddle in the answer now, to correctly show the differences in camel-casing and otherwise – Hari Pachuveetil Oct 03 '11 at 23:54

Matt Ball · Answer 2 · 2011-10-04T00:07:02.880

2

For each element you're interested in, iterate over the object returned by .data() and update that element's jQuery data by toLowerCase()-ing the keys.

$('a').each(function ()
{
    var $this = $(this),
        data = $this.data(),
        kTemp;

    for (var k in data)
    {
        kTemp = k.toLowerCase();
        if (k !== kTemp)
        {
            $this.data(kTemp, data[k]).removeData(k);
        }
    }
});

edited Oct 04 '11 at 00:07

answered Oct 03 '11 at 22:56

Matt Ball

354,903
100
647
710

2

This would void the ability to distinguish between `data-sample-attribute-name` and `data-sampleAttributeName` from within the `.data()` collection – Hari Pachuveetil Oct 03 '11 at 23:26

score 0 · Answer 3 · answered Aug 14 '12 at 20:56

I have a lot of legacy code that has data-attributes in the html. Some attributes contain dashes, and some have mixed case. In order to support w3c spec for html5 data- attributes, and the changes to $.data brought forth in jQuery 1.6, I made a function to transform data attribute name strings to their w3c equivalent; That means that attributes like 'data-fooBar' will be transformed to 'foobar' and 'data-foo-barBaz' would be transformed to 'fooBarbaz'. I needed something like this to add to my $.data() callers so I don't have to update existing html, which could involve database updates, and it would be a nightmare to find all of the data-attributes and update them to conform to the w3c spec. This function is designed specifically to be used in jquery library, and checks the jquery version, only replacing the dashes (+ camelcase) for jQuery version 1.6+ (all data-attributes will be converted to lowercase regardless of jQuery version). The function could easily be converted to work without jQuery.

Usage:

var html5data = $(this).data(w3cdatakey('foo-barBaz')); //same as $.data('fooBarbaz');

check out this fiddle: jsfiddle example

have jQuery ignore case in attribute/data names?

3 Answers3

Linked