J'ai simple à partir duquel se compose d'entrées comme ça:

<form id='some-form'>
    ....
    <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">
    ....
</form>

J'essaie de parcourir ce formulaire et d'obtenir des valeurs de données:

$('#some-form').filter(':input').each(function (i, element) {
     console.log(element.value);
     console.log(element.attr('data-value'));
}

element.value contient la valeur " allumé " ou " éteint " selon que la radio est choisie ou non et qu'elle fonctionne correctement mais quand j'essaie d'appeler element.attr('data-value') elle renvoie une erreur.

Alors, comment puis-je extraire la valeur de données dans cette boucle?

4
godot 11 avril 2018 à 19:40

4 réponses

Meilleure réponse

Utilisez .children () au lieu de . filter () .

Le premier vous fournira les éléments à l'intérieur du formulaire, le second filtrera tous les éléments que $('#some-form') fournira.

HIH

MODIFIER

Comme indiqué par gaetanoM et connexo, il y a aussi le problème d'utiliser element.attr() sans le $() dont vous aurez besoin car .attr() est une méthode de jQuery, pas JS

$('#some-form').children(':input').each(function (i, element) {
     console.log(element.value);
     console.log($(element).attr('data-value'));
     //
     // or
     //
     // console.log(element.dataset.value);
})

console.log('end');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='some-form'>
    
    <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">
    
</form>
3
Scaramouche 11 avril 2018 à 17:01

Dans chaque boucle, vous êtes en fait dans le contexte de l'élément radio, vous pouvez donc utiliser $(this).attr('data-value') et cela fonctionnera. Ce qui suit est un code de travail.

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>
<body>

    <form id='some-form'>
        <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">Hello

    </form>

</body>
</html>

<script type="text/javascript">
$(document).ready(function(){

   $('#some-form :input').each(function (i, element) {

     console.log(i);
     console.log("element", element);
     console.log($(this).val());
     console.log($(this).attr('data-value'));
   });
});
</script>
1
muasif80 11 avril 2018 à 16:55

Cela pourrait également être fait avec du javascript vanille.

document.querySelectorAll('#some-form input[type="radio"]').forEach(radio => {
  console.log(radio.value, radio.dataset.value);
});
<form id='some-form'>
    <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">
</form>
1
Taplar 11 avril 2018 à 16:49

Dans votre .each() fonction element se trouve un HTMLElement normal, pas un objet jQuery.

Soit envelopper cela en utilisant $(element) (ou même $(this)) qui permet d'utiliser $.attr() de jQuery

$(element).attr('data-value')

Ou encore mieux, utilisez la méthode native DOM Api correspondante

element.getAttribute('data-value'))

Puisque vous accédez à un attribut data-, le DOM Api a un objet spécial dataset pour y accéder (à partir d'IE 11):

element.dataset.value

Si vous avez un nom pour votre attribut de données comme data-cmon-lets-go, vous pouvez y accéder en utilisant la notation camelcase:

element.dataset.cmonLetsGo
3
connexo 4 déc. 2019 à 20:14