jQuery使用`data` HTML属性创建一个新元素 [英] jQuery create a new element with `data` HTML attribute

问题描述

问题在于使用HTML data属性(例如<object data="foo"></object>)创建HTML元素.

The question is about HTML element creation with an HTML data attribute, like <object data="foo"></object>.

我在几分钟前偶然发现的一个简短问题；如果我写

Quick question as I stumbled across this a few minutes ago; If I write

$('<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属性名称，因此不创建任何实际数据?

So... why does it not create the HTML attribute data since it is not a data-xxxx attribute name, and therefore does not create any actual data?

我将再次重申该问题的内容.

I'll reiterate what's written in this question once more.

[...]如果我写

$('<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有所了解.

... and once again, I know about .data.

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

Why doesn't $('<div>', { data: 'foo' }) create <div data="foo"></div>, or in other word, why does it ignore the attribute altogether when creating the element?

对于所有认为data不是有效的HTML属性的人，请是.

For all those arguing that data is not a valid HTML attribute, well, it is.

到目前为止，我在此用例中使用的解决方案是

As of today, the solution I am using for this use case is

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

推荐答案

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

When creating an element and passing an object with attributes and methods, any jQuery method is valid, so you can do

$('<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似乎没有考虑到这一点，因此您无法设置属性，因为jQuery将首先捕获data()方法.

In the same way, data="" is not a common attribute, it's only valid on a few elements, like <object>, and jQuery doesn't seem to account for this, so you can't set a data="" attribute as jQuery will catch the data() method first.

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

In other words, this doesn't work, instead it sets the internal data object using data()

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

一个相当奇怪的解决方法是，这似乎区分大小写，因此jQuery仅在键全部为小写字母的情况下才查找方法，另一方面，jQuery attr()总是将小写的属性，因此请执行以下任一操作这些

A rather strange workaround is that this seems to be case sensitive, so jQuery will only look for the methods if the key is all lowercase, and on the other hand, jQuery attr() will always lowercase attributes, so doing any of these

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

将实际起作用，并且设置该属性后，该属性将变为小写字母，因此您最终会得到

will actually work, and the attribute will be lower cased when set, so you end up with

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

FIDDLE

这篇关于jQuery使用`data` HTML属性创建一个新元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！