在使用 jQuery 为浏览器 FF3 和 IE6/7 开发时，在 HTML 标签上设置自定义属性时是否存在兼容性问题？
首先，我知道 jQuery 的 data() 函数，它基本上可以满足我的要求，但数据无法在 clone() 函数中存活。这是使用 jQuery UI 可拖放/可拖放插件时的问题，因为它会在拖放期间克隆 DOM 元素。出于这个问题的目的，我需要data() 的替代品。
我想在拖放操作之间保留数据。我希望能够将数据注入到在拖放操作期间移动的 DOM 元素中。为此，我可以构建 HTML 子元素来模拟数据库记录。快速实验表明，Firefox 使用我想要存储数据字段的任何属性名称都没有问题。但是，HTML 4 规范说某些标签只能包含某些属性名称。使用非标准属性填充 DOM 会导致与我提到的浏览器不兼容吗？
【问题讨论】：
标签： jquery html dom jquery-ui browser
看看我不久前问过的类似问题：Can I just make up attributes on my HTML tags?
就个人而言，我不太喜欢将所有数据放入类属性的建议答案。感觉，只是……错了你知道吗？以我的经验，虽然你的页面如果你弥补属性将无效，但我还是这样做了。在 4 大浏览器中测试它，如果它有效，谁在乎？
我能想到的最好的解决方案是现在无效，但会在 HTML5 中，所以这很好。正如 ms2ger 在其他问题中所建议的那样，在您的自定义属性前面加上 data-
【讨论】：
在 HTML4 中缺少一些标准方法来执行此操作，我很想创建一个与我的可拖动对象相对应的隐藏元素并将相关数据存储在其中。相对于可拖动元素命名隐藏元素，以便您可以轻松查找它的信息。以下扩展使用隐藏跨度实现了这一点。注意：在测试它时，我无法用可拖动项目复制你的问题——data() 似乎对我来说很好，但我没有用各种插件测试它，只是 UI.Draggable。
用法：
$('#draggableDiv').externalData('key','data');
var d = $('#draggableDiv').externalData('key');
jQuery.fn.externalData = function(key, data) {
var value = this;
this.each( function() {
var id = this.id+'_external_data';
var elem = jQuery('#'+id+':first');
if (elem.size() == 0) {
elem = $('<span style="display: none;" id="' + id + '"></span>"' );
elem.appendTo(document.body);
}
if (data) {
elem.data(key,data);
}
else {
value = elem.data(key);
return false;
}
});
return value;
};
【讨论】：
新的 HTML 5 数据属性可能正是您想要的。
【讨论】：
这是相对未知但非常有用的：jQuery Metadata Plugin。它将允许您将数据存储在类名中以供检索。它主要用于验证插件，但实际上可以适应任何场景。
祝你工作顺利。
【讨论】：
Persevere 采用名为 JavaScriptDB 的新原生对象存储引擎，可提供高端可扩展性和性能
http://ajaxian.com/archives/perseveres-javascriptdb-impressive-json-performance
【讨论】：