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

Posted 2023-04-13

【中文标题】jQuery 忽略属性/数据名称中的大小写？

【英文标题】：have jQuery ignore case in attribute/data names?

【发布时间】：2011-11-30 06:58:38

【问题描述】：

我们将 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')

我可以把它变成一个函数，我可以将 camelCase 版本传递给并检查两者。我只是想知道 jQuery 中是否有一个更简洁的内置功能来忽略data（或attr）值的大小写。

【参考方案1】：

对于此处给出的两种变体，您应该使用

获取值

.data('sampleattributename')

驼峰式（.data('sampleAttributeName')）是当属性是这样的时候用的：

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

查看this jsfiddle

【讨论】：

这似乎不起作用。当 html 属性本身是驼峰式时，全小写的 jQuery 返回 undefined。

您使用的是哪个浏览器？对于我在 Firefox 上，我在这个 jsFiddle 中收到两个 example 警报 - jsfiddle.net/FloydPink/yhvDG/1

您看到的未定义来自$(this).id，应该是this.id

@fudgey：啊，我什至没有注意到那里的undefined。我已经更正并更新了答案的工作小提琴。谢谢！

嗯...是的，你是对的。我在那个页面上也有两个。我也一定有其他事情发生。无论如何，你的观点是有效的，让我认为这真的不应该在我的最终解决。 HTML 需要保持一致。

【参考方案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);
        
    
);

【讨论】：

这将使从.data() 集合中区分data-sample-attribute-name 和data-sampleAttributeName 的能力无效

【参考方案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 example