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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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.