compter les éléments dans une balise

Version imprimable

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:

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

04/09/2008, 20h37
SpaceFrog

Code:

childNodes.length

en ayant pris soin d'utiliser le nodeCleaner !

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:

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 ?

05/09/2008, 08h44
SpaceFrog

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

Code:

obj.getElementsByTagName('div')
05/09/2008, 09h48
Sh4dow49

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 ...
05/09/2008, 10h33
SpaceFrog

utilise JQUERY ou Prototype ...ce genre de fonctions avancées sont comprises dans leurs libs...
05/09/2008, 10h58
Sh4dow49

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))

Code:

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>

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

Code:

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>

05/09/2008, 11h46
SpaceFrog

Dasn le cas ou un objet contient plusieurs classes :

Code:

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

voire le traiter avec une regExp ...
05/09/2008, 11h49
Bovino

Citation:

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:

$('.maClasse')

ne te plait pas ???

Citation:

Euh...

Citation:

$('.maClasse')

ne te plait pas ???

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

Code:

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:

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)

05/09/2008, 12h10
SpaceFrog

Code:

if(counter>2)

? :mouarf:
05/09/2008, 12h59
Sh4dow49

oui ca j'avais deviné tout seul :P

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... )
05/09/2008, 13h10
SpaceFrog

Code:

return false ;

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

Voici mon code :

Code:

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é ?

05/09/2008, 20h00
Sh4dow49

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 ... )