如何使用jQuery获取div的data属性并生成字母对应字母表位置的对象

const alphabet = "abcdefghijklmnopqrstuvwxyz".split('');

$('.foo').each(function() {
  // 取当前div的文本和data参数值
  const eleText = $(this).text().trim();
  const widgetStr = $(this).data('widget');
  
  // 生成字母对应位置的对象
  const resObj = {};
  widgetStr.split('').forEach(letter => {
    resObj[letter] = String(alphabet.indexOf(letter) + 1);
  });
  
  // 输出结果
  console.log(`${eleText}: ${JSON.stringify(resObj)}`);
});

说明 #

• 直接使用jQuery的.data('widget')方法获取data-widget属性值，比手动调用.attr()更简洁，不需要带data-前缀
• 遍历每个.foo元素的同时处理对应数据，不需要额外存储所有属性值的数组，逻辑更直观
• 输出时用JSON.stringify格式化对象，完全匹配需求的输出格式

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