web-dev-qa-db-fra.com

Utilisation de jQuery pour obtenir des valeurs d'attribut de données avec .each ()

J'ai le HTML suivant avec des attributs de données - je veux écrire du jQuery qui parcourra le HTML et collectera les attributs de données et les mettra dans un tableau - quelqu'un pourrait-il m'aider car je reçois une erreur.

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

J'essaie d'utiliser l'attribut data () - pouvez-vous voir ce que je fais mal?

// Mon code 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">

// Mon code 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 n'est pas un objet jQuery, les arguments pour each sont l'index et l'élément DOM natif

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

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

utiliser une carte serait plus facile

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

Je comprends que vous devez utiliser $ (article), à ​​la place des données uniquement. Veuillez trouver le code ci-dessous:

<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

Utilisez plutôt 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