web-dev-qa-db-ja.com

jQueryを使用して.each（）でデータ属性値を取得する

私は次のデータ属性を持つHTMLを持っています-HTMLをループしてデータ属性を収集して配列に入れるjQueryを書きたいのですが、エラーが発生したときに誰かが助けてくれるでしょう。

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
javascriptjqueryeachhtml5-data
14
Zabs

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')}
});
30
adeneo

データのみではなく、$（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>
5
Vinay

代わりに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);
1
Jake