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 :

Pourquoi mon selector ne marche pas


Sujet :

jQuery

  1. #1
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    3 080
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 3 080
    Points : 926
    Points
    926
    Par défaut Pourquoi mon selector ne marche pas
    Bonjour à tous,

    Je deviens fou et je ne sais pas si c'est parce que c'est tard, mais je n'arrive pas avoir un résultat.

    J'ai un menu comme celui ci

    Code HTML : 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
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    <nav id="menu" class="e-panel-row" aria-label="Main navigation">
     
                    <ul class="e-justify-content-space-beween bg-black">
     
                        <li class="hasChildren">
                            <div>
                                <a href="#">A propo</a>
                                <a href="#" class="dropdown-toggle" aria-expanded="false">
     
                                    <i class="fa fa-angle-down"></i>
                                </a>
                            </div>
     
                            <ul class="sub-menu" role="group">
                                <li>
                                    <div>
                                        <a href="#">Nous</a>
                                    </div>
                                </li>
                                <li class="hasChildren">
     
                                    <div>
                                        <a href="#">Histoire</a>
                                        <a href="#" class="dropdown-toggle" aria-expanded="false">
     
                                            <i class="fa fa-angle-down"></i>
                                        </a>
                                    </div>
     
                                    <ul class="sub-menu" role="group">
                                        <li>
                                            <div>
                                                <a href="#">Création</a>
                                            </div>
                                        </li>
     
                                        <li class="hasChildren">
                                            <div>
                                                <a href="#">Nos investisseurs</a>
                                                <a href="#" class="dropdown-toggle" aria-expanded="false">
     
                                                    <i class="fa fa-angle-down"></i>
                                                </a>
                                            </div>
                                            <ul class="sub-menu">
                                                <li>
                                                    <div>
                                                        <a href="#">Entreprise SA</a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div>
                                                        <a href="#">Association</a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div>
                                                        <a href="#">Fundation</a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <div>
                                                <a href="#">Développement</a>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <div>
                                    <a href="#">Situation</a>
                                    </div>
                                </li>
                            </ul>
                        </li>    
     
                        <li class="hasChildren">
                            <div>
                                <a href="#">Team</a>
                                <a href="#" class="dropdown-toggle" aria-expanded="false">
     
                                    <i class="fa fa-angle-down"></i>
                                </a>
                            </div>
                            <ul class="sub-menu" role="group">
                                <li>
                                    <div>
                                        <a href="#">Direction</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">Secrétaires</a>
                                        </div>
                                    </li>
                                <li>
                                    <div>
                                        <a href="#">Collaborateurs</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">Partenaires</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
     
                        <li class="hasChildren">
                            <div>
                                <a href="#">Contact</a>
                                <a href="#" class="dropdown-toggle" aria-expanded="false">
     
                                    <i class="fa fa-angle-down"></i>
                                </a>
                            </div>
     
                            <ul class="sub-menu" role="group">
                                <li>
                                    <div>
                                        <a href="#">Adresse</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">Téléphone</a>
                                        </div>
                                    </li>
                                <li>
                                    <div>
                                        <a href="#">e-mail</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
     
                          <li>
                            <div>
                                <a href="#">New item 1</a>
                            </div>
                        </li>
                         <li>
                            <div>
                                <a href="#">New item 2</a>
                            </div>
                        </li>
                          <li>
                            <div>
                                <a href="#">New item 3</a>
                            </div>
                        </li>
     
                        <li>
                            <div>
                                <a href="#">Contact</a>
                            </div>
                        </li>
     
                        <li class="hasChildren">
                            <div>
                                <a href="#">Nous cours</a>
                                <a href="#" class="dropdown-toggle" aria-expanded="false">
     
                                    <i class="fa fa-angle-down"></i>
                                </a>
                            </div>
                             <ul class="sub-menu" role="group">
                                <li>
                                    <div>
                                        <a href="#">CSS Flex</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">Boostrap</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">Django</a>
                                        </div>
                                    </li>
                                <li>
                                    <div>
                                        <a href="#">React</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">jQuery</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

    J'aimerais connaitre la valeur data-n du dernier li.

    Je fais ceci
    Code JQUERY : Sélectionner tout - Visualiser dans une fenêtre à part
    $('nav#menu ul li:last-child').css("background","green");
    Il met le vert sur le dernier li,

    Si je fais ca (ou ca)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    console.log($('nav#menu ul:first-child li:last-child').attr("data-n"));
    console.log($('nav#menu ul:first-child li:last-child').data("n"));
    Il m'affiche 'undefined'

    Si je fais ca
    Code jquery : Sélectionner tout - Visualiser dans une fenêtre à part
    console.log($('nav#menu ul:first-child').attr("class"));
    Il m'affiche la class du ul

    Pourtant, si je regarde ici https://api.jquery.com/last-child-selector/#last-child1 mon selector est juste.

    Plus bas dans mon code, j'ai ceci qui fonctionne très bien
    Code JQUERY : Sélectionner tout - Visualiser dans une fenêtre à part
    let firstChildN = $('nav#hamburger-display ul li:first-child').data('n');

    Donc, pourquoi li:last-child ne fonctionne pas??????

    Merci pour vos lumières
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  2. #2
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    3 080
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 3 080
    Points : 926
    Points
    926
    Par défaut
    Attendez avant de répondre, je viens de voir un truc, l'HTML que j'ai collé, n'a pas le data-n="7", bisard.

    Je comprends pas, avec jQuery, j'ajoute le data-n comme ceci
    Code jquery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    $('nav#menu ul').first().children('li').each(function(index){
     
    		/* Calculate le with of the container of the a, whoch is the div */
    		$(this).attr("data-n",index)
    [...]
    })

    quand je regarde le coce avec FireDebug, je vois bien ceci

    Nom : Screenshot 2022-09-17 at 02.26.03.png
Affichages : 32
Taille : 111,7 Ko

    quand je fais un pomme U pour voir le code de ma page, je ne vois plus les data-n

    Pourtant qu'est-ce qu'il change entre

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('nav#hamburger-display ul li:first-child').data('n');
    et

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    console.log($('nav#menu ul:first-child li:last-child').attr("class"));
    ( a l'exception de ul:first-child)
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  3. #3
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    3 080
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 3 080
    Points : 926
    Points
    926
    Par défaut
    Je crois que ca ca marche
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    console.log("??",$('nav#menu ul').first().children('li:last-child').data("li"));
    Mais je vais continuer demain, je suis HS
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

Discussions similaires

  1. diaporama: pourquoi mon code ne marche pas
    Par secondechance dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 01/05/2009, 03h04
  2. [MASM] Pourquoi mon *.exe ne marche pas ?
    Par link25000 dans le forum x86 16-bits
    Réponses: 1
    Dernier message: 25/04/2009, 00h57
  3. Pourquoi mon script ne marche pas ?
    Par chrifus dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 28/05/2008, 19h04
  4. Pourquoi mon Thread ne marche pas ?
    Par Cazaux-Moutou-Philippe dans le forum Delphi
    Réponses: 9
    Dernier message: 27/05/2007, 17h19
  5. Pourquoi mon script ne marche pas?
    Par amarcil dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 30/05/2006, 22h37

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