jQuery 获取所有数据属性值 - JavaScript

在 Web 开发中，经常需要以数据属性来存储数据，jQuery 提供了方便的方法来获取所有数据属性的值。

获取单个元素数据属性的值

使用 data() 方法可以获取单个元素的数据属性的值。

// HTML
<div id="myDiv" data-foo="bar"></div>

// JavaScript
var fooValue = $('#myDiv').data('foo');
console.log(fooValue); // 输出 "bar"

获取所有元素数据属性的值

使用 each() 方法可以逐个遍历所有元素，并获取其数据属性的值。

// HTML
<div class="myDiv" data-foo="bar"></div>
<div class="myDiv" data-foo="baz"></div>

// JavaScript
var fooValues = [];
$('.myDiv').each(function() {
  var fooValue = $(this).data('foo');
  fooValues.push(fooValue);
});
console.log(fooValues); // 输出 ["bar", "baz"]

总结

通过使用 jQuery 的 data() 和 each() 方法，我们可以方便地获取单个元素和所有元素的数据属性的值。这对于存储和获取数据属性的值非常有用，可以提高代码的可读性和易维护性。