根据匹配的零件选择数据属性

Select data attribute based on matching part

本文关键字：零件 选择 数据属性      更新时间：2024-04-01

如何在类似的元素中选择以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-*]')

您可以通过使用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}) );
相关文章：