[Résolu][jQuery] Parcourir tout l'arbre du document

[Raoull]

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

        }

    } 

[Anthor]

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

[Raoull]

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

[Sephi-Chan]

Normal, ce sont les sélecteurs CSS.

Partant de ça, pour parcourir tous, tous, tous les éléments de ton document, tu peux faire :

Code PHP :

<?php 

$('*').each(function(){

    /* … */

}); 

[Raoull]

Ok, merci pour ces réponses !

[Raoull]

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.

[Sephi-Chan]

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


Sephi-Chan

[Raoull]

Bien vu, merci.

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