Parent d'un élément avec jQuery

En traduisant une librairie Prototype vers jQuery, c'est toujours une bonne occasion de voir les équivalences et de quelle façon on peut faire un workaround pour arriver au même résultat.

Dans un de mes scripts, j'accédais par un sélecteur à un élément du DOM et je devais remonter à un niveau supérieur dans l'imbrication HTML jusqu'à ce que je trouve l'élément cherché. Avec Prototype, j'utilisais Element.ancestors() ou Element.up() pour remonter l'arborescence jusqu'au parent.

Imaginez l'imbrication suivante :

<div id="grand-pere">
   <div id="pere">
       <div id="fils"></div>
   </div>
</div>

En connaissant initialement le div "fils", je voulais savoir quel était le conteneur parent ("pere") et remonter jusqu'au géniteur originel ("grand-pere"). Sous jQuery, j'ai converti le code pour faire l'équivalent en utilisant les fonctions suivantes :

// je ne savais pas que la propriété selector existait!
var selected = $j('#fils');
console.log(selected.selector); // #fils

// parent immédiat
console.log( $j('#fils').parent() ); // [div#pere]

// array qui permet d'obtenir la liste des nodes parents
console.log( $j('#fils').parents() );

Cette dernière me rappelle Dreamweaver (et la fonction Inspect de Firebug) lorsqu'on sélectionne un élément en mode Design. On voit apparaître la descendence du DOM dans la console de Firebug, en commençant par celui rencontré en premier : [div#pere, div#grand-pere, body, html].

Comme la fonction retourne une liste d'éléments, on peut boucler dans l'array pour le traverser :

$j.each( $j('#fils').parents(),
   function(i, e){
       console.log(e);
   }
);

Il suffit ensuite de comparer la valeur de e.id pour savoir à quel niveau s'arrêter.