Question

任何人都知道从单个元素中获取所有数据属性的快速有效方法吗？我意识到jQuerys .data（）会做到这一点，但它不会给我使用.attr（）设置数据属性。除非我首先使用.data（）选择数据属性;此外，您无法通过使用.data（）添加的数据属性选择元素，这似乎很愚蠢。

HTML

<div data-foo="bar"></div>

的javascript

$("div").data();
//returns {foo:bar} good :)

$("div").attr("data-hello","world");
$("div").data()
//returns {foo:bar} no good :(

$("div[data-hello]");
//returns the div, all good :)

$("div").data("find","me");
$("div[data-find]");
//returns nothing, very bad

希望这能解释

Answer 1

您可以在现代浏览器中使用dataset属性（仅限IE11 +），但您可以增强解决方案以使用.attributes来支持旧浏览器

refresh: function () {
    var self = this;

    // First defer to List#refresh to clear the grid's
    // previous content
    this.inherited(arguments);

    if (!this.store) {
        return;
    }

    var promise = when(this._trackError(function () {
        var queryOptions = self.get('queryOptions'),
            results = self.store.query(
                self.query, queryOptions);

        return self.renderArray(
            results, null, queryOptions);
    }));

    promise.then(function () {
        on.emit(self.domNode, 'dgrid-refresh-complete', {
            bubbles: true,
            cancelable: false,
            grid: self
        });
    });

    return promise;
}

演示：Fiddle

Answer 2

不同版本的Internet Explorer支持与此问题相关的不同功能。在版本11中，添加了对dataset的支持，它返回数据属性名称的 DOMStringMap （减去＆＃34;数据 - ＆＃34;部分）及其各自的值

在版本9和10中，我们可以利用 Array.prototype.slice 将支持良好的attributes集合转换为一个数组，然后我们可以将其缩减为一个对象，类似于 DOMStringMap

我们可以将这两种方法结合到一个接受元素作为参数的函数中，并返回一个像这样的对象 {name：＆＃34; pat＆＃34;，＆＃34; age＆＃34 ;：23} 用于所有数据 - 属性：

function getDataAttributes ( el ) {
    return el.dataset || [].slice.call( el.attributes ).reduce(function ( o, a ) {
        return /^data-/.test( a.name ) && ( o[ a.name.substr( 5 ) ] = a.value ), o;
    }, {} );
}

如果您需要支持Internet Explorer 8或更低版本，您仍然可以使用上述方法，只需填充Array.prototype.reduce。

在单个元素上查找所有数据属性

2 个答案: