jQuery创建一个带有`data` HTML属性的新元素

Question

jQuery创建一个带有`data` HTML属性的新元素

jquery

10

序言

这个问题涉及使用HTML的data属性创建HTML元素，比如<object data="foo"></object>。

问题

我刚刚偶然发现一个问题，如果我写下以下代码：

$('<div>', { id:"foo", 'class':"bar" });
// <div id="foo" class="bar"></div>

然而

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

我期望输出的结果是

// [ <object id="foo" data="some+data+string"></object> ]

我知道.data是什么。我的问题是

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

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

更新

我再次重申这个问题中所写的内容。

[...] 如果我写

$('<div>', { id:"foo", 'class':"bar" });
// <div id="foo" class="bar"></div>

然而

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

我期望输出的地方

// [ <object id="foo" data="some+data+string"></object> ]

......而且，我知道.data的用法。

为什么$('<div>', { data: 'foo' })创建的不是<div data="foo"></div>，或者换句话说，为什么它在创建元素时完全忽略了这个属性？

编辑

对于那些认为data不是有效HTML属性的人，可以看看这里。

更新

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

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

- Yanick Rochon

1

创建元素时传递的对象包含属性和/或方法，属性名称为data-foo，而不是data。仅仅因为jQuery的data()函数将数据属性的第二部分作为参数并不意味着它在其他任何地方都能这样工作。 - adeneo

1

http://jsfiddle.net/adeneo/kC9QG/ - adeneo

1

如果你更清楚地阐述了为什么要使用对象标签以及你期望得到什么，我和@j08691就不会误解你了。而现在你却有些无礼，因为你自己无法表达清楚。 - adeneo

@adeneo 我们可以就这个问题争论很长时间。然而，你的论点可以被颠倒过来；我的原始问题并没有被编辑，我只是添加了一个前言和一些更新。如果你停止朝错误的方向寻找，问题已经足够清楚了。顺便说一句，我的粗鲁来自于我在SO上有一段时间的经验（不仅仅是我提出的问题，还有我看到其他用户的问题），因为人们往往很快就会形成（错误的）观点，并降低了该网站的内容质量。并非所有人都是以英语为母语。毕竟，这是互联网。我们并不都生活在美国。 - Yanick Rochon

1

嗯，没错，我不是以英语为母语的人，一开始也没有理解这个问题，但是在所有评论之后，我有点明白了，答案很简单：jQuery首先在传递的对象中查找方法，这就是你可以直接在对象中使用on()和css()的原因，像这样，data()也是一个方法，它只在内部设置数据，并且jQuery在使用键作为属性之前必须查找方法，因为一旦属性被设置，就为时已晚了，如果键匹配方法，则不设置属性。 - adeneo

显示剩余13条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adeneo · Accepted Answer

创建一个元素并传递具有属性和方法的对象时，任何jQuery方法都是有效的，因此您可以执行

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

同样地，data=""不是常见的属性，只在一些元素（如<object>）上有效，而jQuery似乎没有考虑到这一点，所以你不能设置data=""属性，因为jQuery会先捕捉到data()方法。

换句话说，这样做行不通，相反它会使用data()方法设置内部数据对象。

$('<object />', {data : 'somedata'});

有一个相当奇怪的解决方法，即似乎区分大小写，因此jQuery仅在键全为小写时才查找该方法，而另一方面，jQuery attr()始终将属性小写化，因此执行以下任何操作

$('<object>', { id:"foo", 'Data' : "some+data+string" });
$('<object>', { id:"foo", 'daTa' : "some+data+string" });

实际上将起作用，并且在设置时属性名称将被转换为小写，因此最终结果为

<object id="foo" data="some+data+string"></object>

FIDDLE