jQuery 获取 data-*属性值 • 敖烈的存档点

jQuery 获取 data-属性值#

<div id="example" data-name="John" data-age="25"></div>

html

使用 .data() 获取属性值

// 获取单个 data-* 属性值
var name = $("#example").data("name"); // "John"
var age = $("#example").data("age"); // 25
console.log(name, age);

javascript

注意事项#

.data() 方法会自动处理 data-* 属性名的转化。例如：

data-user-name 会映射为 userName。
直接使用 .data('userName') 即可。

如果你希望获取属性的原始值（不经过 jQuery 的缓存），可以用原生的 .attr() 方法：

var rawName = $("#example").attr("data-name"); // "John"
console.log(rawName);

javascript

动态添加的 data-* 属性如果是在 DOM 渲染后动态添加了 data-* 属性，.data() 方法可能无法检测到。可以直接使用 .attr() 方法：

$("#example").attr("data-city", "New York");

// 使用 attr 获取动态添加的值
var city = $("#example").attr("data-city"); // "New York"

// 使用 data 获取动态添加的值（无效，需手动刷新缓存）
console.log($("#example").data("city")); // undefined

javascript

如需让 .data() 获取动态添加的值，可以手动刷新缓存：

$("#example").data("city", "New York");
var city = $("#example").data("city"); // "New York"
console.log(city);

javascript