如何使用jQuery获取指定元素的所有data属性及其对应值？

嘿，这个问题我太熟了！你现在逐个调用attr()拿data属性的方式确实有点繁琐，其实jQuery早就给咱们准备好了一个超方便的方法——不带参数调用data()方法就能一步到位获取所有data-*属性！

核心原理 #

当你对jQuery对象调用不带参数的$(element).data()时，它会返回一个包含该元素所有data-*属性的JavaScript对象，还会自动把属性名的连字符格式转换成驼峰命名（比如data-lat-s会变成latS，data-lng-e变成lngE），用起来特别顺手。

改造后的代码示例 #

把你原来的点击事件代码改成这样就行：

$('.js-road-btn').on('click', function () {
    // 一次性获取所有data属性，得到一个键值对对象
    const roadData = $(this).data();
    
    // 直接通过驼峰名访问对应值，不用再逐个写attr了
    const latS = roadData.latS;
    const longS = roadData.lngS;
    const latE = roadData.latE;
    const longE = roadData.lngE;
    
    // 调试的时候直接打印整个对象，能直观看到所有属性
    console.log('所有data属性:', roadData);
})

额外小提示 #

• 如果只是想快速查看所有data属性，直接console.log($(this).data())就能在控制台看到完整的键值对，调试效率拉满。
• 这个方法不仅能获取，之后修改data属性也很方便：用$(this).data('latS', 新坐标值)就能修改jQuery内部缓存的属性值；如果需要同步更新DOM上的data-*属性，再配合attr('data-lat-s', 新坐标值)操作就行。

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