javascript - 使用 jQuery 通过 .each() 获取数据属性值

Question

我有以下带有数据属性的 HTML - 我想编写一些 jQuery 循环遍历 HTML 并收集数据属性并将它们放入数组中 - 任何人都可以在我遇到错误时提供帮助。

ERROR in console log : item.data is not a function

我正在尝试使用 data() 属性 - 你能看到我做错了什么吗？

// 我的 HTML 代码

<span class="winners" data-userid="123" data-position="1" data-fullname="neil">
<span class="winners" data-userid="234" data-position="2" data-fullname="Ron">
<span class="winners" data-userid="421" data-position="3" data-fullname="Philip">

// 我的 jQuery 代码

var multi = $('.winners');
var winners_array = [];

$.each(multi, function (index, item) {
    winners_array.push( {name: 'fullname', value: item.data('fullname')} );  
});

console.log(winners_array);
// ERROR in console log : item.data is not a function

Answer 1

item不是 jQuery 对象，参数each是索引和原生 DOM 元素

var multi = $('.winners');
var winners_array = [];

$.each(multi, function (index, item) {
    winners_array.push( {name: 'fullname', value: $(item).data('fullname')} );  
});

使用地图会更容易

var winners_array = $.map($('.winners'), function(el) {
     return {name: 'fullname', value: $(el).data('fullname')}
});

Answer 2

我知道您应该使用 $(item)，而不是仅使用数据。请找到以下代码：

<script type="text/javascript">
        var multi = $('.winners');
        var winners_array = [];

        $.each(multi, function (index, item) {
            winners_array.push( {name: 'fullname', value: $(item).data('fullname')} );  
        });

        console.log(winners_array);
    </script>

Answer 3

请改用 item.dataset.fullname。

var multi = $('.winners');
var winners_array = [];

$.each(multi, function (index, item) {
    winners_array.push( {name: 'fullname', value: item.dataset.fullname} );  
});

console.log(winners_array);