使用 jQuery 的 data() 将使用的数据创建原生 dom 元素

Question

我想创建一个 DOM 元素，以原生方式将数据附加到它。然后，稍后创建它的 jQuery 元素，将（自动）这些数据设置为可通过 data() 函数使用。

var x = document.createElement("div");
x. ???? // add the data {a: {x: 4, y:6}}
x = $(x);
var obj = x.data("a")
console.log(a.x); // getting '4'

可以做到吗？如何做到？

请注意，data-[attrib-name] 将不起作用，因为我需要复杂的数据。

Answer 1

您可以使用 javascript 的 setAttribute() 设置 data 属性，如下所示：

var theDiv = document.createElement("div");
theDiv.setAttribute('data-x', '4');
theDiv.setAttribute('data-y', '6');

访问它们：

console.log(theDiv.getAttribute('data-y'));

也可以使用 jQuery:

$(theDiv).data("x");

Answer 2

您可以使用 $.data() 在 jQuery

中的原生 DOM 节点上设置数据

var x = document.createElement("div");

$.data(x, 'a', {x: 4, y:6});


x = $(x);
var obj = x.data("a")
console.log(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Creating native dom element, with data that jQuery's data() will use