如何将HTML元素链接到对象？

Question

假设我有一个JavaScript对象：

var foo = {
    // object content
};

并且此对象从HTML元素获取其数据。 可以这样说：

<div id="linkDiv" data-url="www.google.com"></div>

现在，使用jQuery，您可以轻松地向JavaScript对象中的HTML元素添加直接链接：

foo.divData = $('#linkDiv')

我的问题：

现在，JavaScript对象具有对HTML元素的引用。 如何将对JavaScript对象的引用添加到HTML元素？

Answer 1

这就是jQuery的data功能的作用。

设置：

$("#linkDiv").data("some-name-here", foo);

稍后：

var anotherReferenceToFoo = $("#linkDiv").data("some-name-here");

删除它：

$("#linkDiv").removeData("some-name-here");

data使您可以将任何类型的数据与HTML元素相关联，而不会引起循环引用问题（尽管这些问题实际上只是IE的旧版本所引起的）。 数据可以是JavaScript支持的任何类型。

如果您在某个时候删除了该元素，但前提是您是通过jQuery而不是直接通过DOM删除了该元素，则数据将被清理（即使该数据被深埋在另一个元素中并且您在该另一个元素上使用了html ）。

 var foo = { bar: "baz" }; // Storing it $("#linkDiv").data("some-name-here", foo); // Retrieving it later var f2 = $("#linkDiv").data("some-name-here"); snippet.log("f2.bar = " + f2.bar); // Removing it $("#linkDiv").removeData("some-name-here"); // Checking it's gone var f3 = $("#linkDiv").data("some-name-here"); snippet.log(typeof f3); // undefined 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <div id="linkDiv"></div>