Discussion :

[jonigood55]

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.

[melka one]

jour

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

Code :

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
 
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++
		}
 
}
 
}

[jonigood55]

Bonjour et merci de ta solution melka one.

Ceci ne fonctionne pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[jonigood55]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[jonigood55]

please UP

Pour quoi ceci ne fonctionne pas ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[EddiGordo]

Bonjour,

Parce qu'il manque un ;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

devrait marcher aussi...