从多个元素中获取所有数据属性 jQuery - JavaScript

当我们需要从多个 HTML 元素中获取它们的数据属性时，使用 jQuery 可以轻松完成这项任务。以下是使用 jQuery 获取多个元素数据属性的示例：

// HTML 代码片段
<div class="element" data-id="1" data-name="John"></div>
<div class="element" data-id="2" data-name="Mike"></div>
<div class="element" data-id="3" data-name="Sarah"></div>

// 获取所有 data-id 和 data-name 属性值
var elements = $('.element');
var data = [];

// 循环遍历元素
elements.each(function(){
    var id = $(this).data('id');
    var name = $(this).data('name');
    data.push({
        'id': id,
        'name': name
    });
});

// 打印数据
console.log(data);
// [{id: 1, name: "John"}, {id: 2, name: "Mike"}, {id: 3, name: "Sarah"}]

在这个示例中，我们使用 jQuery 选择器 '.element' 获取所有元素，然后使用 each() 方法循环遍历每个元素。我们使用 data() 方法获取每个元素的 data-id 和 data-name 属性，并将其存储在数组中。最后，我们将数组打印到控制台。

此外，您还可以使用 map() 方法将每个元素的数据属性映射到一个新数组中，如下所示：

// 获取所有 data-id 和 data-name 属性值
var elements = $('.element');

var data = elements.map(function(){
    var id = $(this).data('id');
    var name = $(this).data('name');
    return {
        'id': id,
        'name': name
    };
}).get();

// 打印数据
console.log(data);
// [{id: 1, name: "John"}, {id: 2, name: "Mike"}, {id: 3, name: "Sarah"}]

在这个示例中，我们使用 map() 方法将每个元素的数据属性映射到一个新数组中。这样，我们就可以在不使用 each() 方法的情况下轻松获取多个元素的数据属性。

希望这个示例帮助您掌握如何使用 jQuery 从多个元素中获取所有数据属性。