IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

jQuery : attribut data-* dans une boucle


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2006
    Messages
    985
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juillet 2006
    Messages : 985
    Par défaut jQuery : attribut data-* dans une boucle
    Bonjour,
    A partir d'une boucle, je crée dynamiquement des options d'un select. Et pour chacune des options, je souhaite ajouter un attribut data-*. Et pour cette cause j'ai fait ce code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var items = data;
    for(var i in items){
    	$("<option/>",{'data-level': items[i].level}).appendTo("#select");
    }
    L'attribut data-level est bien créé mais je ne sais si c'est une bonne façon.
    Je ne sais pas comment faire fonctionner cela par cette méthode :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    var items = data;
    for(var i in items){
    	$("<option/>").appendTo("#select");
    	$(this).data('level', items[i].level);//ajout de l'attribut ainsi
    }
    En outre comment récupérer la valeur de l'attribut level avec un onchange sur le select ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $("#select").on("change", function(){
    	alert(valeur de l'attribut level de l'option séléctionnée);
    });
    Merci d'avance...

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2006
    Messages
    985
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juillet 2006
    Messages : 985
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("<option/>",{value: items[i].id, html: items[i].name}).data("level", items[i].level).appendTo("#select");
    En regardant firebug, level n'est pas ajouté.

    Merci pour votre aide.

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    On dirait qu'il y a un souci avec change() !

    Les codes de mon test :

    <select id="selectID"></select>.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    var data = [
    		"images/adoptez-le.png",
    		"images/avatarDVJH.jpg",
    		"images/badge.jpg"
    	];
     
    for(var i in data){
    	$( '<option value="' + i + '" data-dvjh-src="' + data[ i ] + '">' + i + '</option>' ).appendTo( "#selectID" );
    }
     
    // liste les dvjhSrc
    $( "#selectID > option" ).each( function( i, item ){
    	console.log( $( item ).data( "dvjhSrc" ) );
    });
     
    // donne undefined pour les dvjhSrc
    $( "#selectID" ).change( function(){
    	console.log( $( this ).val(), $( this ).data( "dvjhSrc" ) );
    });
     
    // donne bien un objet contenant la propriété dvjhSrc
    console.log( $( "option" ).eq(2).data() );

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function optionIndex( index ){
    	return $( "#selectID > option" ).eq( index ).data( "dvjhSrc" );
    }
     
    /*
     * On utilise this.selectedIndex et la méthode optionIndex( index ) 
     * pour contourner le bogue et obtenir la valeur de data( "dvjhSrc" ).
     */
    $( "#selectID" ).change( function(){
    	console.log( $( this ).val(), optionIndex( this.selectedIndex ) );
    });

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2006
    Messages
    985
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juillet 2006
    Messages : 985
    Par défaut
    Citation Envoyé par danielhagnoul Voir le message
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function optionIndex( index ){
    	return $( "#selectID > option" ).eq( index ).data( "dvjhSrc" );
    }
     
    /*
     * On utilise this.selectedIndex et la méthode optionIndex( index ) 
     * pour contourner le bogue et obtenir la valeur de data( "dvjhSrc" ).
     */
    $( "#selectID" ).change( function(){
    	console.log( $( this ).val(), optionIndex( this.selectedIndex ) );
    });
    Merci.

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Attributes.Add dans une boucle while
    Par Msysteme dans le forum C#
    Réponses: 4
    Dernier message: 18/05/2014, 22h41
  2. Réponses: 2
    Dernier message: 10/11/2011, 12h01
  3. Importation XML d'attributs dans une boucle
    Par laurent7437 dans le forum ActionScript 3
    Réponses: 0
    Dernier message: 22/06/2010, 01h25
  4. [SimpleXML] Analyse XML : tester la présence d'un attribut dans une boucle
    Par Denis Dee Jay dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 04/03/2009, 04h49
  5. Récupération d'attribut dans une boucle
    Par Scoha dans le forum ASP.NET
    Réponses: 3
    Dernier message: 10/04/2008, 10h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo