Select 基于匹配部分的数据属性

Question

如何 select 像这样的元素中以 data-size- 开头的所有数据属性

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

我正在尝试做类似的事情，但无法弄清楚：

$('.el').attr('[data-size-*]')

Answer 1

你可以通过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来判断data-'key'是否以特定的子字符串开头。另外reduce就是根据我们已有的条件，将原来的key数组缩减为一个新的数组

DEMO

Answer 2

这个 returns 一个包含包含名称和值的对象的数组。

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}) );

Select 基于匹配部分的数据属性

Select data attribute based on matching part

javascript

custom-data-attribute

DEMO