如何使用jQuery选择所有键以company开头的HTML5 data属性？

嘿，这个需求其实可以通过优雅的方式实现，不用写冗长的if+indexOf判断！下面给你两种实用的方案：

方案1：直接遍历元素属性（精准保留原格式） #

如果你需要严格保留data-company_*的下划线命名格式，直接操作原生DOM属性是最靠谱的选择，用ES6的startsWith()替代indexOf，代码简洁又直观：

// 选中目标<a>元素
const $target = $('a');
const companyData = {};

// 遍历元素的所有属性节点
$target[0].attributes.forEach(attr => {
  // 判断属性名是否以"data-company"开头
  if (attr.name.startsWith('data-company')) {
    // 去掉"data-"前缀，保留原键名格式
    const key = attr.name.replace('data-', '');
    companyData[key] = attr.value;
  }
});

console.log(companyData);
// 输出：{company_1: "CocaCola", company_2: "Apple", company_3: "Oracle"}

这个方法完全避开了indexOf，后续你直接拆分下划线后的字段也非常方便。

方案2：利用jQuery的.data()方法（简洁驼峰化） #

jQuery的.data()会自动把所有data-*属性转换成一个对象（键名会自动驼峰化，比如data-company_1变成company1），结合Object.entries()和filter()可以快速筛选：

const $target = $('a');
const allData = $target.data();

// 筛选键名以"company"开头的条目
const companyData = Object.fromEntries(
  Object.entries(allData).filter(([key]) => key.startsWith('company'))
);

console.log(companyData);
// 输出：{company1: "CocaCola", company2: "Apple", company3: "Oracle"}

如果你的业务逻辑能接受驼峰化的键名，这个写法会更简洁。

补充：关于属性选择器的误区 #

你提到知道可以针对属性值用[attribute^=value]，但这个选择器是用来选择包含指定前缀属性值的元素，而不是提取元素上的某类属性。如果只是要选择带有任意data-company*属性的元素，可以这么写：

// 选择所有带有以data-company开头属性的<a>元素
const $companyLinks = $('a[data-company]');

但这和你要提取属性的需求不一样，所以还是上面两种方案更匹配你的场景。

内容的提问来源于stack exchange，提问作者ViBoNaCci