jQuery 是否忽略属性/数据名称中的大小写？

Question

我们使用 HTML5 的 data-* 属性来设置一些客户端交互。 jQuery 使用这些来完成它的任务。

问题是传入的 HTML 可能会有所不同。显然，这是应该解决的问题，但不幸的是，我并不总是能够控制生成的 HTML。

问题：

给定这两个标签：

<a data-sampleAttributeName="example">

<a data-sampleattributename="example">

是否有一种聪明的方法将它们视为同一个？

我想出的最好的办法是这样的：

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

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

我可以将其转换为一个函数，我可以将驼峰版本传递给该函数并检查两者。我只是想知道 jQuery 中是否有一个更清晰的内置功能来忽略 data （或 attr）值的大小写。

Answer 1

对于此处给出的两种变体，您应该使用驼峰式大小写 (.data('sampleAttributeName')) 获取值，

.data('sampleattributename')

适用于属性如下所示的情况：

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

检查 这个 jsfiddle

Answer 2

对于您感兴趣的每个元素，迭代 .data() 返回的对象，并通过 toLowerCase() 更新该元素的 jQuery 数据。

$('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);
        }
    }
});

Answer 3

我有很多遗留代码，它们在 html 中具有数据属性。有些属性包含破折号，有些属性包含大小写混合。为了支持 html5 数据属性的 w3c 规范，以及 jQuery 1.6 中对 $.data 的更改，我创建了一个函数来将数据属性名称字符串转换为它们的 w3c 等效项；这意味着“data-fooBar”等属性将转换为“foobar”，“data-foo-barBaz”将转换为“fooBarbaz”。我需要像这样的东西添加到我的 $.data() 调用者中，这样我就不必更新现有的 html，这可能涉及数据库更新，并且找到所有数据属性并将它们更新为符合w3c规范。该函数专门设计用于 jquery 库，并检查 jquery 版本，仅替换 jQuery 版本 1.6+ 的破折号（+驼峰式）（无论 jQuery 版本如何，所有数据属性都将转换为小写）。该函数可以轻松地转换为无需 jQuery 即可工作。

用法：

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

看看这个小提琴：
jsfiddle 示例