javascript - 根据匹配部分选择数据属性

Question

如何在像这样的元素中选择所有以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 来确定数据“键”是否以特定子字符串开头。另外reduce就是根据我们已有的条件，将原来的key数组reduce成一个新的数组。

DEMO