jQuery用`data` HTML属性创建一个新元素

前言

问题是关于HTML元素创建与HTML data属性，如 。

问题

几分钟前我偶然发现了这个问题。 如果我写

 $('
', { id:"foo", 'class':"bar" }); // 
 

然而

 $('', { id:"foo", data:"some+data+string" }); // [  ] 

我期望输出的地方

 // [  ] 

我知道.data 。 我的问题是

 $('', { id:"foo", data:"some+data+string" }).data(); // Object {} $('', { id:"foo", 'data-foo':"some+data+string" }).data(); // Object {foo:"some+data+string"} 

那么……为什么它不创建HTML属性data因为它不是data-xxxx属性名，因此不会创建任何实际数据？

更新

我将再次重申这个问题的内容。

[…]如果我写

 $('
', { id:"foo", 'class':"bar" }); // 
 

然而

 $('', { id:"foo", data:"some+data+string" }); // [  ] 

我期望输出的地方

 // [  ] 

……再一次，我知道.data 。

为什么$('

', { data: 'foo' })创建

，换句话说，为什么在创建元素时它完全忽略了属性？

编辑

对于所有那些认为data不是有效的HTML属性的人，嗯， 就是这样 。

更新

截至今天，我用于此用例的解决方案是

 $('
', { attr: { data: 'foo' } }); 

Answer 1

在创建元素并使用属性和方法传递对象时，任何jQuery方法都是有效的，因此您可以这样做

 $('
', { id : "foo", 'class' : "bar", text : "test", // jQuery text() is called, html : '', // jQuery html() is called, css : { // jQuery css() is called, color: 'red' }, on : { // calls jQuery's .on('click' ... click: function() { alert } } }); 

以同样的方式， data=""不是一个常见的属性，它只对少数元素有效，比如 ，而jQuery似乎没有考虑到这一点，所以你不能设置data=""属性为jQuery将首先捕获data()方法。

换句话说，这不起作用，而是使用data（）设置内部数据对象

 $('', {data : 'somedata'}); 

一个相当奇怪的解决方法是，这似乎区分大小写，因此如果键全部为小写，jQuery将只查找方法，另一方面，jQuery attr（）将始终使用小写属性，因此执行任何这些操作

 $(' 

实际上会工作，设置时属性会更低，所以你最终得到了

小提琴