Question

给出如下元素：

<div data-answer="42" data-question="?"></div>

jQuery data()将返回您期望的对象：

{answer: 42, question: "?"}

但是，jQuery插件也会被添加到元素的内部缓存中，并将包含在数据中：

{answer: 42, question: "?", somePlugin: Plugin}

我想从元素中仅存在的数据属性中创建一个对象，不包括添加到jQuery缓存中的任何内容。有一个简单的方法，还是我必须循环遍历元素的属性，过滤掉非data- *属性并“手动”构造对象？

正如Oriol的回答所指出的那样，elem.dataset完成了我的要求，但它只受IE 11的支持 - 我的情况需要解决方案适用于IE 8 +

Answer 1

循环访问对象应该很容易，并过滤出元素没有相应属性的键。

或者，Vanilla JS可能有用：

var elem = document.getElementById('yourElementIDhere');
// or any other way of getting the element, doesn't matter
var attrs = elem.attributes;
var data = {};
var attr;
for( var i=0, l=attrs.length; i<l; i++) {
    attr = attrs[i];
    if( attr.name.substr(0,5) == "data-") {
        data[attr.name] = attr.value;
    }
}

Answer 2

你可以尝试vanilla-js方式：

element.dataset;

另见dataset MDN article。

从元素data- *属性构建对象

2 个答案: