如何通过jQuery的.data()方法筛选并遍历指定前缀的data属性

很遗憾，jQuery的.data()方法本身并不支持通配符或前缀匹配的语法，没办法直接用你设想的$.each($('a').data('ajax'+*), ...)这种方式来筛选特定前缀的data属性。不过我们可以用几种更优雅的方式来实现需求，而不是单纯遍历所有data后再判断：

1. 用正则精准匹配前缀 #

既然.data()返回的是所有data属性的对象，我们可以用正则表达式来精准匹配以ajax开头的键名（注意jQuery会把data-ajax-this这类短横线命名的属性转换为驼峰式的ajaxThis）：

$.each($('a').data(), function(key, value) {
  // 匹配以ajax开头的键名，避免误匹配包含ajax的其他属性
  if (/^ajax/.test(key)) {
    console.log(`${key} , ${value}`);
  }
});

2. 封装自定义方法复用筛选逻辑 #

如果需要频繁做这类筛选，不如给jQuery扩展一个专属方法，用起来就像直接调用.data()筛选一样方便：

// 给jQuery扩展获取指定前缀data属性的方法
$.fn.dataPrefix = function(prefix) {
  const matchedData = {};
  const allData = this.data();
  // 动态生成匹配前缀的正则
  const prefixRegex = new RegExp(`^${prefix}`);
  
  $.each(allData, function(key, value) {
    if (prefixRegex.test(key)) {
      matchedData[key] = value;
    }
  });
  
  return matchedData;
};

// 调用方式非常简洁
$.each($('a').dataPrefix('ajax'), function(key, value) {
  console.log(`${key} , ${value}`);
});

3. 直接遍历原生DOM属性（更贴近原始属性名） #

如果你想保留data-ajax-this这种原始的短横线属性名，而不是jQuery转换后的驼峰名，可以直接遍历元素的原生属性：

const $link = $('a');
// 遍历元素的所有属性，筛选以data-ajax开头的
$.each($link[0].attributes, function(_, attr) {
  if (attr.name.startsWith('data-ajax-')) {
    console.log(`${attr.name} , ${attr.value}`);
  }
});

这些方法都能帮你高效筛选出目标data属性，其中自定义方法的方式最接近你想要的“直接通过.data()类方法筛选”的体验。

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