[POO] Comment tester le contenu du nom de class d'une div ?

Version imprimable

11/03/2008, 19h44
Vincdeladrome

[POO] Comment tester le contenu du nom de class d'une div ?
Bonjour,

Alors, j'ai une page html qui est générée automatiquement, et coté client, je dois tester certaines choses. Voici le contenu html :
Code:

1 2 3 4 <ul class="menu" id="navigation"><li class="parent item64"> <li class="parent active item65"> <li class="parent item66"> <li class="parent item67">
J'ai alors alors un fichier js qui travail sur cette page, et qui commence comme ceci :

Code:

var togs = $$('li.parent');

Je souhaite ensuite tester et noter dans une variable quelle <li> contient "active" dans sa class.

Dans l'exemple ci-dessus, le test devrait stocker "1" dans une variable.

Vous me comprenez ? Je me doute que c'est hyper simple, mais comme je débute ;)...
11/03/2008, 23h53
Auteur

bonjour,

tu veux connaître le nom des classes appliquées sur un élément ? Essaye avec une expression régulière : voir cet exemple
http://www.developpez.net/forums/sho...73#post1792773

Dans l'exmple, le tableau tab contient la liste des classes appliquées sur l'objet, il te suffit de le parcourir, et tu vérifies s'il contient la valeur "active". ;)

Merci !

Alors j'ai intégré ta solution très prometteuse à mon code, mais ça ne fonctionne pas : surement parce que je ne m'y connais pas encore assez bien en js ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var togs = $$('li.parent'); // ici je récupère l'ensemble des balises li.parent dans un tableau var elems = $$('li.parent ul'); //concerne la suite du code (menu accordeon) var classes; var tab = new Array(); var exp = /(\w*[^\s])/gi; togs.each(function(el, i){ classes = el.classeName; tab = classes.match(exp); alert(tab); }); })
Qu'en dis-tu ? C'est bizarre parce que quand j'ai posé ton code exemple 'autonome' (qui commence par "var classes = "classe1 uneAutreClasse classe2 classe3";") ça marche très bien. Maintenant que je l'adapte, non. Est-ce que mon tableau "togs" ne contient pas ce qu'il faut ?

j'ai l'impression qu'il y a un mélange de javascript et PHP :?

Tu n'as pas défini les variables el (objet dont on récupère les classes) et i.
Voici un code tout en javascript :
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 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body onload="listeItems()"> <ul class="menu" id="navigation"> <li class="parent item64">item 64</li> <li class="parent active item65">item 65</li> <li class="parent active item66">item 66</li> <li class="parent item67">item 67</li> </ul> </body> </html>
listeItems() : cette fonction permet de lister toutes les balises li contenues dans une balise ul (ici navigation). Dans la boucle j'appelle la fonction recherche qui prend en paramètre 1 élément li. La fonction est exécutée lors de l'événement onload de la page.
recherche(elementLi) : cette fonction prend donc en paramètre un objet li. J'ai décomposé la fonction en 2 parties indépendantes :
la première partie (que j'ai placé en commentaire), te permet de lister les classes qui s'appliquent à l'objet elementLi, le résultat se trouve dans tab.
la seconde partie (qui, je crois, répond mieux à ton problème) recherche exclusivement la présence du mot "active" dans le className. S'il est présent la condition est vrai :
Code:

1 2 3 if (exp.test(elementLi.className)) alert("ok : " + elementLi.innerHTML + " est actif");
Dans l'exemple ci-dessus deux items respectent la condition : item65 et item66.

Ayé ! Ton code m'a permis d'apprendre beaucoup, et en le modifiant un peu, de faire un truc qui fonctionne.

En fait, j'ai besoin de récupérer uniquement les li.parent , ce que ne permet pas ton code ; alors j'ai rusé et ça donne ça :

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
    var i, n;
    var menu;
    var tabItemsMenu;
	var exp1 = /(parent)/gi;
    var exp2 = /(active)/gi;
	var compteur = -1;
	var voir = -1;
 
    menu = document.getElementById("navigation");   // on cible le menu navigation
    tabItemsMenu = menu.getElementsByTagName("li");    // tous les li du menu navigation
 
    n = tabItemsMenu.length;  // nombre de li
    for (i=0; i<n; i++)
    {
			// recherche des classes de  l item i
		if (exp1.test(tabItemsMenu[i].className)) {
			compteur++;
			if (exp2.test(tabItemsMenu[i].className))
				voir = compteur;
		}
 
		exp1.test("");   // !! pour Firefox =>reinitialisation des index de recherche
		exp2.test("");   // !! pour Firefox =>reinitialisation des index de recherche
	}

Tout fonctionne. Un GRAND merci ! :D

12/03/2008, 21h24
Auteur

Citation:

Envoyé par Vincdeladrome

Ayé ! Ton code m'a permis d'apprendre beaucoup, et en le modifiant un peu, de faire un truc qui fonctionne.

En fait, j'ai besoin de récupérer uniquement les li.parent , ce que ne permet pas ton code ;

en effet le getElementsByTagName("nomBalise") prend tous les enfants du conteneur appelant la méthode. Ton code me semble correct ;)

Citation:

Envoyé par Vincdeladrome

Tout fonctionne. Un GRAND merci ! :D

de rien ;)