OVH Cloud OVH Cloud

Javascript : fonction récursive ?

1 réponse
Avatar
Phil
Bonjour

Je cherche à récupérer toutes les balises DIV d'un document, et les afficher
en spécifiant leur niveau d'imbrication.
Par exemple :

+ <DIV id="1">
- <DIV id="1-1"></DIV>
</DIV>

+ <DIV id="2">
- <DIV id="2-1"></DIV>
+ <DIV id="2-2"></DIV>
- <DIV id="2-2-1"></DIV>
- <DIV id="2-2-2"></DIV>

etc...

Ici on a 2 DIV principaux (enfants de BODY), chacun a 1 ou plusieurs
enfants, qui à leur tour ont des enfants etc...

J'arrive à récupérer tous mes DIV avec getElementsByTagName, mais pour ce
qui est de parcourir chaque noeud de l'arbre, déterminer quel DIV a des
enfants, combien il en a, si eux-mêmes ont des enfants, stocker quelque part
leur N° d'index pour afficher les niveaux, etc...là je sèche complètement.

Je ne vois qu'une fonction récursive capable de faire tout ça ?

Car bien sûr je ne peux pas savoir à l'avance quels seront les niveaux
d'imbrication, combien de DIV il y aura, sinon à la limite j'aurais pu faire
des boucles.

Si quelqu'un peut me mettre sur une piste, j'apprécierais beaucoup.
Merci

1 réponse

Avatar
Denis Flament
Phil wrote:

Bonjour

Je cherche à récupérer toutes les balises DIV d'un document, et les afficher
en spécifiant leur niveau d'imbrication.



En CSS : il suffit de cacher tous les éléments :
body * {diplay:none;}

et d'afficher les div comme une liste:
body div {
display: list-item;
list-style-type: decimal;
margin-left: 3%;
}

... et de touver un navigateur avec lequel ça marche ;-)

sous IE6 ça va à peu près :

<html>
<head>
<title>Div imbriquées</title>

</head>

<body>

<style>

* {border: solid 1px #CCCCFF;}

body * {display:none;}

body div {
display: list-item;
list-style-type: decimal;
margin-left: 5%;
}

</style>

<p>ppppppppppppp</p>
<div>div 1</div>
<div>div 2</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div>div3
<div>div3.1</div>
<div>div3.2</div>
<div>div3.3</div>
<div>div3.4

<p>element caché</p>

<div>div3.4.1</div>
<div>div3.4.2</div>
</div>
<div>div3.5</div>
</div>
<div>div4</div>
<div>div5</div>
<div>div6</div>

</body>
</html>


--
Denis

Pour me répondre utiliser l'adresse courriel figurant après
moncourrielest" dans mon adresse courriel...
Private replies: remove "moncourrielest" from my e-mail address