JeuWeb - Crée ton jeu par navigateur
[Résolu][jQuery] Parcourir tout l'arbre du document - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu][jQuery] Parcourir tout l'arbre du document (/showthread.php?tid=3409)



[Résolu][jQuery] Parcourir tout l'arbre du document - Raoull - 10-12-2008

Bonjour,

voilà, je me suis enfin collé à jquery, il ya à peine qlques heures.
J'ai lu qques tutos, et je m'aide surtout de de http://jquery.developpeur-web2.com/documentation.php

Pour débuter, j'ai fait qlques tests basiques, je suis d'ailleurs conquis par la puissance de la bête, puis là jme colle à un ptit exercice : réaliser une table des matières dynamique d'une page html.

Il faut donc parcourir tous les éléments d'une page, ne retenir que les titres H*, leur coller une ancre, et alimenter notre table des matières avec le "titre du titre" et avec le lien qui va bien pour s'y rendre.

Voilà mon code :

Code PHP :
<?php 
// --- table des matières ---

// tableau des titres
var tdm = Array();

// on parcours la page à la recherche des titres H*
$("#main").children().each(function(){
// si c'est bien un titre h*
if ($(this).is("h1") || $(this).is("h2") || $(this).is("h3") || $(this).is("h4") || $(this).is("h5") || $(this).is("h6")) {
// on ajoute le nom du titre au tableau
tdm[tdm.length] = $(this).text();
// on entoure le titre d'une ancre unique
$(this).wrap('<a name="tdm' + tdm.length + '"></a>');
}
});

// - si ya au moins 1 titre
if (tdm.length > 0) {
// on créé le div de la table des matières, et la liste (ul) des titres
$("#main").prepend('<div id="tdm"><strong>Table des matières</strong><ul></ul></div>');

// on parcours le tableau et on ajoute des LI avec un lien vers l'ancre du titre
for (var i = 0; i < tdm.length; i++) {
$(
"#tdm ul").append('<li><a href="#tdm' + (i+1) + '">' + tdm[i] + "</a></li>");
}
}

Ce n'est sûrement pas parfait (les suggestions sont les bienvenues) mais ça fonctionne (test ici : http://isoat.org/test/tdm/ ).

Mon souci, c'est que je voudrais parcourir tous les enfants de l'élément BODY, toute la page quoi, mais impossible... J'ai tenté ça :
Code :
$("body")
$(document.body)
etc. mais ça ne fonctionne pas.

Pour l'instant je suis obligé de passer par un div#main pour pouvoir utiliser :
Code :
$("#main").children().each(function(){ ... }
et
$("#main").prepend( ... )

Quelle est l'astuce pour parcourir tous les éléments H* du document sans préciser un div comme parent ?


RE: [jquery] parcourir les enfants de BODY - Anthor - 10-12-2008

(10-12-2008, 07:26 AM)Raoull a écrit : Quelle est l'astuce pour parcourir tous les éléments H* du document sans préciser un div comme parent ?

Code PHP :
<?php 
$("h1, h2, h3, h4, h5, h6").each(function().....



RE: [jquery] parcourir les enfants de BODY - Raoull - 10-12-2008

hooo mais on peut mettre plusieurs éléments séparés par des virgules ... mais c'est gé-nia-leuuuu !
merki !

Mais si je veux effectivement parcourir tous tous tous les éléments de mon document ? (histoire de les afficher dans un bel arbre en 3d iso avec toutes les branches qui se togglent en synchro par exemple...)


RE: [jquery] parcourir les enfants de BODY - Sephi-Chan - 10-12-2008

Normal, ce sont les sélecteurs CSS. Smile

Partant de ça, pour parcourir tous, tous, tous les éléments de ton document, tu peux faire :
Code PHP :
<?php 
$('*').each(function(){
/* … */
});

Ça me fait penser que ça fait un moment que je n'ai pas joué avec jQuery…


Sephi-Chan


RE: [résolu] [jquery] parcourir les enfants de BODY - Raoull - 10-12-2008

Ok, merci pour ces réponses !


RE: [résolu] [jquery] parcourir tout tout tout l'arbre du document - Raoull - 10-12-2008

précision :
Code :
$("h1, h2, h3, h4, h5, h6").each()
ne permet pas de traiter les H* dans l'ordre où ils se présentent.
C'est logique ca traite d'abord les H1 puis les H2, etc.
Ce n'est donc pas la solution pour lister l'arbre des titres d'une page en vue d'une table des matières.

Je suis donc bien obligé de parser tous les éléments de la page, dans l'ordre, pour ne retenir que les titres.
Dommage, c'est forcément plus lourd.


RE: [Résolu][jQuery] Parcourir tout l'arbre du document - Sephi-Chan - 10-12-2008

J'ai trouvé un plugin très sympa pour jQuery : jQPlanize.
Je t'invite à y jeter un œil, ça pourrait t'intéresser. Smile


Sephi-Chan


RE: [Résolu][jQuery] Parcourir tout l'arbre du document - Raoull - 10-12-2008

Bien vu, merci.

En mattant le code source, la solution c'est : $("*:header:visible").each()