Javascript 基于匹配零件选择数据属性

如何在像这样的元素中选择以

数据大小-

开头的所有数据属性

<div class="el" data-name="str" data-size-100="str" data-size-158="str" data-size-304="str">str</div>

---

您可以使用

dataset

var data = $('.el')[0].dataset;
var attrs = Object.keys(data).reduce(function(a,b){
 if(b.startsWith("size")){ a.push(data[b]); }
 return a;
},[]);

console.log(attrs); \\ ["str","str","str"]

在这里，我使用

startsWith

来确定数据-'key'是否以特定的子字符串开头。另外，

reduce

是根据现有条件将原始密钥数组减少为新数组

---

这个函数返回一个数组，其中的对象同时包含名称和值

var     myDiv = document.getElementsByClassName("el")[0],
dataSizeAttrs = [];
Array.prototype.forEach.call(myDiv.attributes, e => 
  /data-size/.test(e.nodeName) && dataSizeAttrs.push({name : e.nodeName,
                                                      value: e.nodeValue}) );

---

是否要获取对象中所有

数据大小-*

的值？是的，所有数据大小。类似于

el.attr（'[data size-*]'）.split（'，'）

是否有多个元素具有类

.el

？不，只有单个元素好！建议:1。使用具有键值的对象获取数据属性名称和值。2.完全删除jQuery依赖项，使用

querySelector（）

。

var     myDiv = document.getElementsByClassName("el")[0],
dataSizeAttrs = [];
Array.prototype.forEach.call(myDiv.attributes, e => 
  /data-size/.test(e.nodeName) && dataSizeAttrs.push({name : e.nodeName,
                                                      value: e.nodeValue}) );