compter les éléments dans une balise

**Sh4dow49** · 04/09/2008, 21h32

Bonjour,

La question est simple et dans le titre : comment peut-on compter le nombre d'éléments dans une balise sans être dans un formulaire ?

J'ai par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="block1" class="conteneur" >
	<div class="item" >item avec du texte</div>
	<div class="item" >item avec un autre text</div>
</div>
<div id="block2" class="conteneur" >
	<div class="item" >blablabla</div>
</div>
<div id="block3" class="conteneur" >
	<div class="item" >aaa</div>
	<div class="item" >bbb</div>
	<div class="item" >ccc</div>
</div>

Toujours pour l'exemple : je voudrais compter en javascript le nombre de div ayant pour class "item" dans la div ayant pour class "conteneur" et pour id "block3"

Est ce possible et si oui comment ? (je cherche depuis hier mais en vain )

Help me please

Grand merci d'avance à ceux qui m'aideront à résoudre ce problème

**SpaceFrog** · 04/09/2008, 21h37

Code :

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

childNodes.length

en ayant pris soin d'utiliser le nodeCleaner !

**Sh4dow49** · 04/09/2008, 22h44

Alors j'ai essayé et j'ai grossièrement ce que je voulais mais je n'arrive pas à l'exploiter

voila ce que j'ai :

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
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
<div id="sort1" class="groupWrapper">
	<div id="newsFeeder" class="groupItem">
 
		<div class="itemHeader">Feeds</div>
		<div class="itemContent">
			<p>blabla</p>
		</div>
	</div>
	<div id="news" class="groupItem">
		<div class="itemHeader">News</div>
		<div class="itemContent">		
			<p>blabla</p>
		</div>
	</div>
	<p>&nbsp;</p>
 
</div>
<div id="sort2" class="groupWrapper" name="sort2">
	<div id="shop" class="groupItem">
		<div class="itemHeader">Shopping</div>
		<div class="itemContent">
			<p>blabla</p>
		</div>
	</div>
	<p>&nbsp;</p>
</div>
<div id="sort3" class="groupWrapper">
	<div id="links" class="groupItem">
 
		<div class="itemHeader">Links</div>
		<div class="itemContent">
			<p>blabla</p>
		</div>
	</div>
	<div id="images" class="groupItem">
		<div class="itemHeader">Images</div>
		<div class="itemContent">
			<p>blabla</p>
		</div>
	</div>
	<p>&nbsp;</p>
 
</div>
<script type="text/javascript">
$(document).ready(
	function () {
		$('div.groupWrapper').Sortable(
			{
				accept: 'groupItem',
				helperclass: 'sortHelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				handle: 'div.itemHeader',
				tolerance: 'pointer',
				onChange : function(ser)
				{
				},
				onStart : function()
				{
					$.iAutoscroller.start(this, document.getElementsByTagName('body'));
				},
				onStop : function()
				{
					$.iAutoscroller.stop();
 
					var fils = document.getElementById("sort2").childNodes;
					var nbFils = document.getElementById("sort2").childNodes.length;
					var nb = 0;
 
					for (var i = 1; i <= nbFils; i++)
					{
						if (fils[i].nodeName == "DIV")
						{
							nb++;
							alert(nb);
						}
					}
 
					alert(nb); //cette ligne ne fait rien !
				}
			}
		);
	}
);
</script>
		<script language="JavaScript" type="text/javascript">var client_id = 1;</script>
		<script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script>
		<noscript>
		<p><img alt="" src="http://stats.byspirit.ro/image.php?client_id=1" width="1" height="1" /></p>
		</noscript>
</body>
</html>

Le commentaire parle de lui même : je n'arrive pas à afficher le nombre d'éléments.

En gros, le code mis après la boucle for dans le onStop ne s'exécute pas et je ne vois pas pourquoi ...
J'ai pensé à une erreur de syntaxe mais tout semble correct ... (ou je ne vois pas l'erreur)

Pouvez vous m'aider encore svp ?

**SpaceFrog** · 05/09/2008, 09h44

si c'est pour compter les divs enfants ......

Code :

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

obj.getElementsByTagName('div')

**Sh4dow49** · 05/09/2008, 10h48

Et est ce qu'il n'y aurait pas la même solution mais au lieu de récupérer les éléments enfants via le tag, plutôt les récupérer grâce à leur class ? (pour ne récupérer que le nombre d'éléments ayant la class "groupItem")

Ce que tu m'as proposé marche mais comme j'ai des div imbriqués il me renvoie 3 pour 1 item, 6 pour 2 etc ...

**SpaceFrog** · 05/09/2008, 11h33

utilise JQUERY ou Prototype ...ce genre de fonctions avancées sont comprises dans leurs libs...

**Sh4dow49** · 05/09/2008, 11h58

Justement j'essaye de chercher en même temps une fonction qui ferai ça (car j'utilise en effet jQuery) mais je ne trouve pas.

Et j'ai voulu fouiller un peu dans le code de la librairie pour voir :
1 - le fichier est tout en vrac (tout est à la suite, et j'ai voulu le remettre en ordre une fois, trop la misère à faire tellement ya de trucs...)
2 - mes compétences en javascript sont encore assez limitées donc je n'ai pas compris grand chose (accentué par le fait que c'est en vrac)

C'est pour cela que je cherchais une solution parallèle, mais c'est sur que si jQuery fait ça tout seul je vais continuer à chercher (si vous avez des suggestions de fonctions qui font ce que je souhaite ... Pour rappel, je voudrais limiter le nombre de groupItem dans la groupWrapper "sort2", voir dans toutes les groupWrapper si possible : démo du code actu (voir code source pour les détails))

**SpaceFrog** · 05/09/2008, 12h12

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type='text/javascript'>
function CountClassInId(cl,objId,objTag){
var obj=document.getElementById(objId)
var TabDivs=obj.getElementsByTagName(objTag)
 
var counter=0;
i=0;
while(TabDivs[i]){ if(TabDivs[i].className==cl){counter++;}
                  i++;}
return counter                  
}
</script>
</head>
 
<body>
<div id="block1" class="conteneur" >
	<div class="item" >item avec du texte</div>
	<div class="item" >item avec un autre text</div>
</div>
<div id="block2" class="conteneur" >
	<div class="item" >blablabla</div>
</div>
<div id="block3" class="conteneur" >
	<div class="item" >aaa</div>
	<div class="item" >bbb</div>
	<div class="item" >ccc</div>
</div>
<input type="button" onclick="alert('block 1 => '+CountClassInId('item','block1','div'))" value="block1" />
<input type="button" onclick="alert('block 2 => '+CountClassInId('item','block2','div'))" value="block2" />
<input type="button" onclick="alert('block 3 => '+CountClassInId('item','block3','div'))" value="block3" />
</body>
 
</html>

**Auteur** · 05/09/2008, 12h43

Dans le cas où un objet contient plusieurs classes (cas du 3ème div contenu dans le "block1") :

Code x :

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
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />

 
 
<script type="text/javascript">
<!--
function fonctionTest(idParent, classeRech)
{
  var i, j, k, n;
  var objOut = new Array();
  
  var objParent = document.getElementById(idParent);
  var objEnfants = objParent.getElementsByTagName("*"); //"*" =>tous les éléments enfants
  
  var expClasses = /(\w*[^\s])/gi; // pour récupérer toutes les classes appliquées sur un objet
  var tabClass = new Array();


  n = objEnfants.length;
  k = 0;
  for (i=0; i<n; i++)
  {
    // on récupère toutes les classes appliquées sur objEnfants[i]
    tabClass = objEnfants[i].className.match(expClasses);

    if (tabClass.length>0)
    {
      for (j=0; j<tabClass.length; j++)
      {
        if (tabClass[j]==classeRech)
        {
          // si objEnfants[i] contient la classe recherchée, on garde objEnfants[i]
          objOut[k] = objEnfants[i]; 
          k++;
        }
      }
    }
  }
  
  alert(objOut.length);
  //return objOut; //retourne le tableau contenant les objets ayant pour classe 'classeRech'
}



//-->
</script>
 
</head>
 
<body>


<div id="block1" class="conteneur" >
	<div class="item" >item avec du texte</div>
	<div class="item" >item avec un autre text</div>
  <div class="classe1 classe2 item classe3">div sur lequel les classes "classe1 classe2 item classe3" sont appliquées"</div> 
</div>
<div id="block2" class="conteneur" >
	<div class="item" >blablabla</div>
</div>
<div id="block3" class="conteneur" >
	<div class="item" >aaa</div>
	<div class="item" >bbb</div>
	<div class="item" >ccc</div>
	<div class="item" >ddd</div>  
</div>


<input type="button"  onclick="fonctionTest('block1', 'item')" value="block1" />
<input type="button"  onclick="fonctionTest('block2', 'item')" value="block2" />
<input type="button"  onclick="fonctionTest('block3', 'item')" value="block3" />


</body>
</html>

**SpaceFrog** · 05/09/2008, 12h46

Dasn le cas ou un objet contient plusieurs classes :

Code :

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

if(TabDivs[i].classNameindexOf(cl)>-1)

voire le traiter avec une regExp ...

**Bovino** · 05/09/2008, 12h49

Justement j'essaye de chercher en même temps une fonction qui ferai ça (car j'utilise en effet jQuery) mais je ne trouve pas.

Euh...

Code :

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

$('.maClasse')

ne te plait pas ???

**Sh4dow49** · 05/09/2008, 13h08

Euh...

$('.maClasse')

ne te plait pas ???

sisi j'ai déjà. mon code jQuery sur la page est pour l'instant celui ci :

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
18
19
20
21
22
23
24
25
26
27
28
 
<script type="text/javascript">
$(document).ready(
	function () {
		$('div.groupWrapper').Sortable(
			{
				accept: 'groupItem',
				helperclass: 'sortHelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				handle: 'div.itemHeader',
				tolerance: 'pointer',
				onChange : function(ser)
				{
				},
				onStart : function()
				{
					$.iAutoscroller.start(this, document.getElementsByTagName('body'));
				},
				onStop : function()
				{
					$.iAutoscroller.stop();
				}
			}
		);
	}
);
</script>

Ce que je cherche à faire, c'est que l'on ne puisse pas dropper plus de 3 groupItem par groupWrapper (3 pour exemple).

Je remet mon code actuel :

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
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>
		<script type="text/javascript" src="jQuery/jquery-1.2.6.min.js"></script>
		<script type="text/javascript" src="jQuery/interface 1.2/interface.js"></script>
		<script type="text/javascript">
			function CountClassInId(cl, objId, objClass)
			{
				var obj = document.getElementById(objId);
				var tabDivs = obj.getElementsByTagName(objTag);
 
				var counter = 0;
				i = 0;
 
				while (tabDivs['i'])
				{
					if (tabDivs[i].className == cl)
					{	
						counter+;
					}
					i++;
				}
 
				return counter
			}
		</script>
</head>
<body>
<div id="sort1" class="groupWrapper">
	<div id="newsFeeder" class="groupItem">
		<div class="itemHeader">Feeds</div>
		<div class="itemContent">
			<p>blablabla</p>
		</div>
	</div>
	<div id="news" class="groupItem">
		<div class="itemHeader">News</div>
		<div class="itemContent">		
			<p>blablabla</p>
		</div>
	</div>
</div>
<div id="sort2" class="groupWrapper" name="sort2">
	<div id="shop" class="groupItem">
		<div class="itemHeader">Shopping</div>
		<div class="itemContent">
			<p>blablabla</p>
		</div>
	</div>
</div>
<div id="sort3" class="groupWrapper">
	<div id="links" class="groupItem">
		<div class="itemHeader">Links</div>
		<div class="itemContent">
			<p>blablabla</p>
		</div>
	</div>
	<div id="images" class="groupItem">
		<div class="itemHeader">Images</div>
		<div class="itemContent">
			<p>blablabla</p>
		</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(
	function () {
		$('div.groupWrapper').Sortable(
			{
				accept: 'groupItem',
				helperclass: 'sortHelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				handle: 'div.itemHeader',
				tolerance: 'pointer',
				onChange : function(ser)
				{
				},
				onStart : function()
				{
					$.iAutoscroller.start(this, document.getElementsByTagName('body'));
				},
				onStop : function()
				{
					$.iAutoscroller.stop();
				}
			}
		);
	}
);
</script>
<input type="button" onclick="alert('sort 1 => '+CountClassInId('groupItem','sort1','div'))" value="sort1" />
<input type="button" onclick="alert('sort 2 => '+CountClassInId('groupItem','sort2','div'))" value="sort2" />
<input type="button" onclick="alert('sort 3 => '+CountClassInId('groupItem','sort3','div'))" value="sort3" />
</body>
</html>

Les boutons de SpaceFrog me retournent bien le bon nombre. Maintenant je cherche à exploiter ce résultat pour interdire à l'utilisateur de dropper un groupItem dans un groupWrapper qui aurait déjà 3 groupItem... (on approche de la solution quand même au fur et a mesure je ne perds pas espoir que cela soit possible et je continue à chercher aussi)

**SpaceFrog** · 05/09/2008, 13h10

Code :

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

if(counter>2)

?

**Sh4dow49** · 05/09/2008, 13h59

oui ca j'avais deviné tout seul

Mais je cherche une fonction qui interdit le drop (je cherche actuellement dans les fonctions draggable et droppable de jQuery, dont Sortable que j'utilise se sert, mais les tests sont plutôt fructueux... )

**SpaceFrog** · 05/09/2008, 14h10

Code :

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

return false ;

**Sh4dow49** · 05/09/2008, 15h25

Je ne pense pas être loin de la vérité mais j'ai encore besoin de votre aide

Voici mon code :

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
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; utf-8" />
		<title>Sortables demo - Interface plugin for jQuery</title>
		<script type="text/javascript" src="jQuery/jquery-1.2.6.min.js"></script>
		<script type="text/javascript" src="jQuery/interface 1.2/interface.js"></script>
		<script type="text/javascript">
			function CountClassInId(cl, objId, objTag)
			{
				var obj = document.getElementById(objId);
				var tabDivs = obj.getElementsByTagName(objTag);
 
				var counter = 0;
				i = 0;
 
				while (tabDivs[i])
				{
					if (tabDivs[i].className == cl)
					{
						counter++;
					}
 
					i++;
				}
 
				if (counter > 2)
				{
					return true;
				}
				else 
				{
					return false;
				}
			}
		</script>
	</head>
	<body>
		<div id="sort1" class="groupWrapper">
			<div id="newsFeeder" class="groupItem">
				<div class="itemHeader">Feeds</div>
				<div class="itemContent">
					<ul><li>blablabla</li></ul>
				</div>
			</div>
			<div id="news" class="groupItem">
				<div class="itemHeader">News</div>
				<div class="itemContent">		
					<ul><li>blablabla</li></ul>
				</div>
			</div>
		</div>
		<div id="sort2" class="groupWrapper">
			<div id="shop" class="groupItem">
				<div class="itemHeader">Shopping</div>
				<div class="itemContent">
					<ul><li>blablabla</li></ul>
				</div>
			</div>
		</div>
		<div id="sort3" class="groupWrapper">
			<div id="links" class="groupItem">
				<div class="itemHeader">Links</div>
				<div class="itemContent">
					<ul><li>blablabla</li></ul>
				</div>
			</div>
			<div id="images" class="groupItem">
				<div class="itemHeader">Images</div>
				<div class="itemContent">
					<ul><li>blablabla</li></ul>
				</div>
			</div>
		</div>
		<script type="text/javascript">
		$(document).ready(
			function () {
				var revert;
				$('div.groupWrapper').Sortable(
					{
						accept: 'groupItem',
						helperclass: 'sortHelper',
						activeclass: 'sortableactive',
						hoverclass: 'sortablehover',
						handle: 'div.itemHeader',
						tolerance: 'pointer',
						onChange : function(ser)
						{
						},
						onStart : function()
						{
							$.iAutoscroller.start(this, document.getElementsByTagName('body'));
						},
						onStop : function()
						{
							$.iAutoscroller.stop();
							revert = CountClassInId(this.className, this.parentNode.id, 'div');
						}
					}
				);
 
				$('div.groupWrapper.groupItem').Draggable(
					{
						revert: revert, 
						fx: 300
					}
				);
			}
		);
		</script>
	</body>
</html>

En gros, lorsque je lache mon item, la fonction se lance et me renvoie true si il y a plus de 2 items dans le conteneur, false si il y en a 2 ou moins.

Ensuite, j'ai la fonction Draggable qui met l'option revert à la valeur retour de la fonction (true ou false). Pour ceux qui ne connaissent pas, revert, mis à true, permet de renvoyer l'item à son emplacement d'origine.

Mais l'item ne retourne pas à son emplacement.

Je commence à etre a court d'idée ... en avez vous d'autre de votre coté ?

**Sh4dow49** · 05/09/2008, 21h00

En fait je me demandais si ce n'était pas plus simple de limiter le nombre de "places" dans un groupWrapper à 3 par exemple (je cherche depuis 15 minutes mais je n'ai pas trouvé comment faire pour l'instant, si quelqu'un sais ... )

compter les éléments dans une balise

JavaScript

Discussions similaires

Partager

Partager