Numérotation dynamique de div visible

Bonjour et merci de me lire, j'ai besoin d'un coup de main en javascript svp.

j'ai plusieurs div identiques, générer dynamiquement en fonction de donnés envoyés par un formulaire, pour cette exemple imaginons que 10 div sont générés, certaines sont cachées et d'autre non (cachées par un clique sur un bouton toogle...), j'ai besoin de numérotés les div non cachées en fonction de leurs positions d'affichage en ajoutant a chaque div une balise <h2>.

j'utilise .length pour connaitre le nombre de div non caché avec ça :

Code:

---

var countHidden = $('.MaClass:visible').length;

---

Je ne trouve pas comment les numérotés en fonction de la position de chaque div qui a la classe .MaClass et qui est visible (display:block)

Actuellement les div apparaissent comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10

<div id="1" class="MaClass"</div> <div id="2" class="MaClass"</div> <div id="3" class="MaClass"</div> <div id="4" class="MaClass"</div> <div id="5" class="MaClass"</div> <div id="6" class="MaClass"</div> <div id="7" class="MaClass"</div> <div id="8" class="MaClass"</div> <div id="9" class="MaClass"</div> <div id="10" class="MaClass"</div>

---

Il faudrait avec un bouton, les numérotés comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10

<div id="1" class="MaClass"><h2>position 1</h2></div> <div id="2" class="MaClass"><h2>position 2</h2></div> <div id="3" class="MaClass"><h2>position 3</h2></div> <div id="4" class="MaClass"><h2>position 4</h2></div> <div id="5" class="MaClass"><h2>position 5</h2></div> <div id="6" class="MaClass"><h2>position 6</h2></div> <div id="7" class="MaClass"><h2>position 7</h2></div> <div id="8" class="MaClass"><h2>position 8</h2></div> <div id="9" class="MaClass"><h2>position 9</h2></div> <div id="10" class="MaClass"><h2>position 10</h2></div>

---

Pour exemple, il faudrait que si je désactive la div 6 et 2 le calcule ce réinitialise dynamiquement sur toutes les div visible afin que le compte reste dans l'ordre d'affichage croissant (de la première div affichée a la dernière) comme ceci :

Code:

---

1 2 3 4 5 6 7 8

<div id="1" class="MaClass"><h2>position 1</h2></div> <div id="3" class="MaClass"><h2>position 2</h2></div> <div id="4" class="MaClass"><h2>position 3</h2></div> <div id="5" class="MaClass"><h2>position 4</h2></div> <div id="7" class="MaClass"><h2>position 5</h2></div> <div id="8" class="MaClass"><h2>position 6</h2></div> <div id="9" class="MaClass"><h2>position 7</h2></div> <div id="10" class="MaClass"><h2>position 8</h2></div>

---

Merci d'avance a tous pour votre aide.
Cordialement.

jour

en prenant en compte que tous les éléments on la même class ça donne ceci

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function teste(){   var compteur=1 var all =document.querySelectorAll(".MaClass");   for(var i=0;i<all.length;i++){   if(all[i].style.display=="block"){   all[i].firstElementChild.textContent=compteur compteur++ }   }   }

---

Bonjour et merci de ta solution melka one.

Ceci ne fonctionne pas :

Code:

---

1 2	all[i].firstElementChild.textContent=compteur compteur++

---

j'ai supprimé la condition uniquement pour testé la formule en attendant ... ça donne ceci :

Code:

---

1 2	all[i].textContent = compteur compteur++;

---

Il y a aussi un souci au niveau de l'insertion du texte, bizarrement l’insertion ne s'effectue qu'aux deuxièmes clique, obliger de cliqué deux fois pour voir l'insertion du résultat ?

J'ai omis de précisé que je doit avoir un deuxièmes bouton qui lance la même fonction inversé (-1 dans le compte si la div est caché...)

merci

Le problème du double click, j'utilise ceci comme bouton :

Code:

---

Créer une nouvelle categorie : <a id="verif'.$album_img.'" href="javascript:compteur();javascript:Afficher('.$album_img.',\'true\');javascript:verificationH(\'dernier2'.$album_img.'\')" /> Oui </a>

---

Je passe trois fonctions dans ce bouton, quand je supprime les deux autres fonctions ça marche au premier clique, une idée ?

please UP

Pour quoi ceci ne fonctionne pas ?

Code:

---

1 2 3

all[i].firstElementChild.textContent=compteur compteur++;

---

Bonjour,

Parce qu'il manque un ;

Code:

---

1 2 3

all[i].firstElementChild.textContent=compteur; compteur++;

---

En même temps, pourquoi faire ça en deux lignes ?

Code:

---

1 2	all[i].firstElementChild.textContent=compteur++;

---

devrait marcher aussi...

Bonjour,

avec jQuery :

Code:

---

1 2 3 4 5 6 7

$(function() { compteur = 0; $('.MaClass:visible').each(function() { compteur++; $(this).append('<h2>position ' + compteur + '</h2>'); }); });

---

salut et merci a toi
ça ne fonctionne pas meme avec ; , ça fonctionne uniquement quand je retire firstElementChild

le probleme du clic je pense que c'est du au fait que le style est déclaré dans une feuille de style ou dans l'entete dans ce cas il faut utiliser getComputedStyle

pour l'autre probleme essai avec firstChild ou getElementsByTagName j'ai modifié le js en utilisant getElementsByTagName et getComputedStyle

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function teste(){   var compteur=1 var all =document.querySelectorAll(".MaClass");   for(var i=0;i<all.length;i++){   if(getComputedStyle(all[i], null).display=="block"){   all[i].getElements.getElementsByTagName('<h2>')[0].textContent=compteur compteur++ } } }

---

ça me retourne :

Code:

---

1 2	TypeError: all[i].getElements is undefined all[i].getElements.getElementsByTagName('<h2>')[0].textContent=compteur

---

ça a l'aire de bien fonctionner comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function test(){   var compteur=1 var all =document.querySelectorAll('.MaCat');   for(var i=0;i<all.length;i++){   if(getComputedStyle(all[i], null).display=='block'){     all[i].firstElementChild.textContent=compteur compteur++ } } }

---

Je fait quelques testes et je vous confirme ....

C'est ok

Merci a tous et surtout melka one ;-)
a bientot