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

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

HTML

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来支持旧版浏览器

 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, function (key, value) { console.log(key, value) }) 

演示： 小提琴

Answer 2

不同版本的Internet Explorer支持与此问题相关的不同function。 在版本11中，添加了对dataset支持，该dataset返回数据属性名称的DOMStringMap （减去“数据 – ”部分）及其各自的值。

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

我们可以将这两种方法组合成一个接受元素作为参数的函数，并为所有数据属性返回一个像{name：“pat”，“age”：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 。