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