Compter des getElementById

Compter des getElementById - HTML/CSS - Programmation

Marsh Posté le 22-02-2006 à 15:42:05    

Bonjour,
 
je voulais savoir si il était possible de compter des éléments d'une page web afin de faire une boucle pour pouvoir
afficher ou cacher ces elements à l'aide d'une fonction javascript.
 
chaque element à un id d'attribué et par exemple je voudrais compter (ou recuperer) tout les éléments commençant par "ligne_"
pour ensuite faire une boucle avec ceci à l'intérieur.
 

Code :
  1. if(document.getElementById("ligne_***" ).style.display=="none" ){
  2. document.getElementById("ligne_***" ).style.display="block";
  3. }else{
  4. document.getElementById("ligne_***" ).style.display="none";
  5. }


 
Si c'est possible, quelle fonction utiliser ?

Reply

Marsh Posté le 22-02-2006 à 15:42:05   

Reply

Marsh Posté le 22-02-2006 à 16:24:46    

Oui, je pense qu'il est possible de compter les éléments d'un objet, avec objet.elements.length. Je l'ai déjà fait pour les éléments d'un formulaire (avec le bout de code ci-dessous), et je pense que cela devrait être à peu près la même chose pour les élément d'une page entière.

  form_obj = document.getElementById(form_name);
  for (i = 0; i < form_obj.elements.length; i++) {
     if (form_obj.elements[i].type == "text" ) {
        // J'ai un champ de type text, etc...
     }
  }

Reply

Marsh Posté le 23-02-2006 à 09:17:38    

j'ai essayer de faire un getElementById sur la page mais ça ne marche pas, j'ai essayer sans passer de parametre.
J'ai rechercher sur différent site et d'aprés ce que j'ai vue ça ne fonctionne qu'avec des formulaires.
 
Y a t'il moyen de compter les element par id dans une page html sinon comment faire ??

Reply

Marsh Posté le 23-02-2006 à 09:32:12    

Je ne crois pas qu'il y ait un moyen de récupérer tous les éléments d'une page de façon propre (c'est à dire sans utiliser document.all).
 
Sans voir ton code Html, c'est dur d'imaginer une solution mais j'imagine que tous tes éléments "ligne_*" ont le même tag (<p>, <div> ou équivalent). si c'est le cas, tu peux utiliser document.getElementsByTag() pour récupérer un tableau contenant tous les éléments d'un type donné, ensuite il ne te reste plus qu'à parcourir les éléments du tableau et extraire ceux dont le nom commence par "ligne_"
 
ex :  

Code :
  1. mesDiv = document.getElementsByTag("div" );
  2. for (i = 0; i < mesDiv.length; i++) {
  3.   if (mesDiv[i].id.substring(0, 6) == "ligne_" ) {
  4.     // l'id commence par "ligne_"
  5.   }
  6. }

Reply

Marsh Posté le 23-02-2006 à 10:00:51    

mesDiv = document.getElementsByTagName("div" ); :o
 
et  
(mesDiv[i].id.indexOf("ligne_" )!=-1) :o

Reply

Marsh Posté le 23-02-2006 à 10:28:00    

ok ça fonctionne, mais maintenant ça bug au niveau de l'affichage
voici mon code pour l'instant

Code :
  1. var tab_tr = document.getElementsByTagName('tr');
  2. for(var i=0; i<tab_tr.length; i++){
  3. if(tab_tr[i].id.indexOf("ligne_"+cle)!=-1){
  4.  if(document.getElementById("ligne_"+cle).style.display=="none" ){
  5.   document.getElementById("ligne_"+cle).style.display="block";
  6.  }else{
  7.   document.getElementById("ligne_"+cle).style.display="none";
  8.  }
  9. }
  10. }


 
chaque ligne à un id, à chaque fois que je redescend d'un niveau, mon id reprend _key
(le nom des niveau ne correspond pas du tout à ce qui suit, ce sont des groupe de travail et sous groupe, j'ai mis ceci pour simplifier, la seul chose qui reste est le '_'
exemple
ligne_niv1a
ligne_niv1a_niv2a
ligne_niv1a_niv2a_niv3a
ligne_niv1a_niv2a_niv3a_niv4a
ligne_niv1a_niv2a_niv3b
ligne_niv1a_niv2b
ligne_niv1b
 
mon but est d'afficher les niveaux juste en dessous donc qui comportent un _ en plus que le niveau supérieur.
comment faire pour recuperer juste un niveau inferieur pour le mettre dans mon getElementById à la place du "ligne_"+cle que j'ai mis


Message édité par rdams le 23-02-2006 à 10:28:48
Reply

Marsh Posté le 23-02-2006 à 10:43:45    

Citation :

mesDiv = document.getElementsByTagName("div" ); :o


oups ...

Citation :

(mesDiv[i].id.indexOf("ligne_" )!=-1) :o


dans la pratique ça doit marcher mais :
 - s'il a un id = "totoligne_", ça va le prendre aussi (ses id ont l'air cohérents donc pas de problème)
 - c'est + lent car ça parcourt tout l'id (et apparemment ses id peuvent être longs) alors qu'avec substring on ne parcourt que 6 caractères :p
 

Citation :

Code :
  1. if(document.getElementById("ligne_"+cle).style.display=="none" ){
  2.   document.getElementById("ligne_"+cle).style.display="block";
  3. }else{
  4.   document.getElementById("ligne_"+cle).style.display="none";
  5. }



 
Ce code veut dire que chaque fois que tu tombes sur un élement commançant par 'ligne_niv1a', tu inverses le display de l'élément de plus haut niveau.
 
ex : quand tu tombes sur ligne_niv1a_niv2a_niv3a_niv4a, tu inverse le display de ligne_niv1a


Message édité par Bidem le 23-02-2006 à 10:46:58
Reply

Marsh Posté le 23-02-2006 à 11:03:26    

Citation :

mon but est d'afficher les niveaux juste en dessous donc qui comportent un _ en plus que le niveau supérieur.
comment faire pour recuperer juste un niveau inferieur pour le mettre dans mon getElementById à la place du "ligne_"+cle que j'ai mis


 
Si le caractère '_' n'apparait pas dans le nom de tes sous groupes, tu peux utiliser la fonction split() et compter le nombre d'éléments du tableau retourné
 

Code :
  1. var id_objet = tab_tr[i].id;
  2. var tab = id_objet.split("_" ); // découpe la string
  3. // tab[0] == ligne
  4. // tab[1] == valeur de la clée
  5. if (tab.length == 3) {
  6.   // l'id contenait exactement 3 élements ex : ligne_niv1a_niv2a
  7. }

Reply

Marsh Posté le 23-02-2006 à 11:35:33    

je viens de faire ceci, le probleme maintenant c'est qu'il ne m'affiche que le 1er element d'un sous niveau meme s'il y en a plusieurs
 

Code :
  1. var nb_id=0;
  2. var nb_cle=0;
  3. var tab_tr_abo = new Array();;
  4. //on recupere ds un tableau le nbre de ligne (tr) dans la page html
  5. var tab_tr = document.getElementsByTagName('tr');
  6. for(var i=0; i<tab_tr.length; i++){
  7. if(tab_tr[i].id.indexOf("ligne_"+cle)!=-1){
  8.  var test = tab_tr[i].id.indexOf("ligne_"+cle);
  9.  //recherche du nbre de _ dans tab_tr[i] et dans cle
  10.  var tab_id=tab_tr[i].id.match(/_/g);
  11.  nb_id=tab_id.length;
  12.  var tab_cle=cle.match(/_/g);
  13.  if(tab_cle){
  14.   nb_cle=tab_cle.length;
  15.  }else{
  16.   nb_cle=0;
  17.  }
  18.                           // test du nbre de _, pour affcher ou supprimer le niv suivant
  19.  if(nb_id==(nb_cle+2)){
  20.   if(document.getElementById(tab_tr[i].id).style.display=="none" ){
  21.    document.getElementById(tab_tr[i].id).style.display="block";
  22.   }else{
  23.    document.getElementById(tab_tr[i].id).style.display="none";
  24.   }
  25.  }
  26. }
  27. }

Reply

Marsh Posté le 23-02-2006 à 11:41:02    

c'est peut etre bon, j'ai un petit prob d'init des cle niveau php sur la fond de l'arbre.

Reply

Marsh Posté le 23-02-2006 à 11:41:02   

Reply

Marsh Posté le 23-02-2006 à 11:42:46    

ca fait crade ta facon de faire nan ?  
moi j'aurai plutot vu un genre de liste <ul><li> imbriqués
avec un joli JS DOM :  
http://gatsu.ftp.free.fr/html/Exem [...] cence.html

Reply

Marsh Posté le 23-02-2006 à 16:06:38    

Je suis arrivé au resultat pour agrandir pas de prob mais ensuite pour reduire la galere,
j'ai essayé ta solution Gatsu35, elle me plait bien.
 
Merci pour votre aide, j'en connais un peu plus en JS ce soir.

Reply

Marsh Posté le 23-02-2006 à 18:23:52    

ouais mais il est un peu buggué.
 
C'est fou ça kan mêle, tu fais un truc pour une boite apparament et un gros truc et tu ne ocnnais presque rien en JS.
 
Bon personne pour me donner du boulot là :o ?

Reply

Marsh Posté le 24-02-2006 à 09:55:44    

oui le JS, je connais pas trop,
as tu un lien avec un cour sur le JS qui explique bien les methodes des différents objet, à quoi elles servent.
 
merci

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed