javascript – 查找单个元素的所有数据属性

任何人都知道从单个元素中获取所有数据属性的快速有效方法吗？我意识到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

希望这能解释

解决方法

您可以在现代浏览器中使用 dataset属性(仅限IE11),但您可以增强解决方案以使用 .attributes来支持旧版浏览器

var $in = $('input'),input = $in[0],//here input is a dom element reference
    dataMap = input.dataset;
//if dataset is not supported
if (typeof dataMap == 'undefined') {
    dataMap = {};
    $.each(input.attributes,function (key,attr) {
        var match = attr.name.match(/^data-(.+)/);
        if (match) {
            dataMap[match[0]] = attr.value;
        }
    })
}
$.each(dataMap,value) {
    console.log(key,value)
})

演示：Fiddle