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

JavaScript Discussion :

Sélectionner des id de la forme #texte[n1][n2] avec querySelectorAll


Sujet :

JavaScript

  1. #1
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 571
    Points : 803
    Points
    803
    Par défaut Sélectionner des id de la forme #texte[n1][n2] avec querySelectorAll
    Bonjour,

    Il me semble que j'avais déjà une question similaire mais je ne la retrouve pas. Désolé!
    Pour le traitement php, j'ai besoin d'avoir des crochets dans mes id. L'id est de la forme #texte[n1][n2]. La partie [n1][n2] est extraite dans une variable subKeys.
    Je veux sélectionner tous les id qui ont les mêmes valeurs n1 et n2 mais pas forcément la même chaîne littérale.
    J'ai essayé plusieurs possibilités avec 'id*='+subKeys. J'ai aussi essayé d'échapper les crochets avec une regex mais je n'arrive pas à construire ma regex.
    Voici la regex que j'ai essayé: subKeys = subKeys.replace(/(\[||\])/, '\\$1');.

  2. #2
    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 : 73
    Localisation : Belgique

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

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


    Un ID ne peut pas avoir cette forme car elle provoque une erreur :

    Citation Envoyé par console
    Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '#texte[24][36]' is not a valid selector.
    Malgré cette erreur, le sélecteur donne la bonne réponse, exemple :

    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
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
    	<!-- cache-control avec max-age=60 pour le développement uniquement -->
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
      <meta name="author" content="Daniel Hagnoul">
      <title>test</title>
      <style>
                    *,
                    *:after,
                    *:before {
                            box-sizing: border-box;
                    }
                    
                    /* CSS du test */
                    
                    label {
                            display: block;
                    }
                    
                    /* Fin CSS du test */
     
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
      <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
      <script>
        'use strict';
                    
        document.addEventListener( "DOMContentLoaded", ev => {
                            // le DOM est construit, la page web n'est pas visible
                            moment.locale( "fr" );
                            klog( `DOM ready   : ${ new kDvjhDate() }` );
                            
          // code du test
                            
     
                            // fin code du test
          
        }, false );
        
        window.addEventListener( "load", ev => { 
                            // le DOM est construit et la page web est visible
                            klog( `Window load : ${ new kDvjhDate() }` );
                            
          // code du test
                            
                            // k$all( "[id^='texte[']" ) : Array.from( document.querySelectorAll( "[id^='texte[']" ) )
                            const elemsIDtexte = k$all( "[id^='texte[']" );
                            
                            for ( const elemIDtexte of elemsIDtexte ){
                                    klog( elemIDtexte.id, elemIDtexte.textContent );
                            }
                            
                            // fin code du test
     
          kIDUnique();
        }, false );
      </script>
    </head>
    <body>
    	<main>
     
    		<div id="texte[24][36]">Bonjour !</div>
    		<div id="texte[42][63]">Hello !</div>
     
    	</main>
    </body>
    </html>

    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.)

  3. #3
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 571
    Points : 803
    Points
    803
    Par défaut
    Merci avec cependant 2 petites remarques:
    for... of ne fonctionne pas avec IE<11.
    L'exemple ne correspond pas tout à fait à mon besoin puisque ce qui m'intéresse est de trouver tous les ID qui ont la partie entre crochets identiques quelque soit la chaîne qui précède.
    Cependant l'exemple m'a bien aidé et j'ai pu transposer comme ceci:
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    		const	subKeys		= id.substring(id.indexOf('[')),
    			elemsToDel	= kTbody.querySelectorAll("[id*='"+subKeys+"']");

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

Discussions similaires

  1. Tester si les arguments sont des entiers
    Par mailbox dans le forum Débuter
    Réponses: 4
    Dernier message: 09/11/2010, 16h40
  2. [WD12] Chercher les doublons dans un fichier texte
    Par matt1704 dans le forum WinDev
    Réponses: 17
    Dernier message: 11/06/2009, 09h31
  3. [C#] Travailler efficacement avec les panels dans une forme
    Par WwiloO dans le forum Windows Forms
    Réponses: 8
    Dernier message: 27/06/2005, 16h33
  4. [JTable] Comment récuperer les données d'un fichier texte ?
    Par Makunouchi dans le forum Composants
    Réponses: 2
    Dernier message: 03/05/2005, 17h37
  5. Envoie d'un message a TOUS les composant d'une form
    Par chddv dans le forum Composants VCL
    Réponses: 7
    Dernier message: 15/09/2003, 10h47

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