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

**Vincdeladrome** · 11/03/2008, 19h44

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 :

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

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 :

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

	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

...

**Auteur** · 11/03/2008, 23h53

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

**Vincdeladrome** · 12/03/2008, 09h14

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 :

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

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 ?

**Auteur** · 12/03/2008, 15h25

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 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
<html>
<head>
<title></title>

<script type="text/javascript">
<!--
function recherche(elementLi)
{
/*  // pour connaître les différentes classes appliquees sur elementLi
    var classes;
    var tab = new Array();
    var exp1 = /(\w*[^\s])/gi;  // expression reguliere appliquee

    classes = elementLi.className;
    tab = classes.match(exp1);
    alert(tab);

    classes.match("");  // !! pour Firefox =>reinitialisation des index de recherche
*/

   //***************************************************
   // pour rechercher exclusivement le mot "active" dans une classe
    var exp2 = /(active)/gi;
    if (exp2.test(elementLi.className))
        alert("ok : " + elementLi.innerHTML + " est actif");

    exp2.test("");   // !! pour Firefox =>reinitialisation des index de recherche

}

function listeItems()
{
    var i, n;
    var menu;
    var tabItemsMenu;

    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
        recherche(tabItemsMenu[i]);
    }
}

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

**Vincdeladrome** · 12/03/2008, 19h53

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 :

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

**Auteur** · 12/03/2008, 21h24

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

Envoyé par Vincdeladrome

Tout fonctionne. Un GRAND merci !

de rien

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

JavaScript

Discussions similaires

Partager

Partager