Médiaforma

All posts tagged hierarchique

Tous les objets du DOM font partie d’un arbre commun dont la racine est la balise <body>. Le tableau suivant dresse la liste des sélecteurs hiérarchiques utilisables en jQuery.

Sélecteur Éléments sélectionnés
(‘p > e’) Éléments e directement descendants d’éléments p
(‘p + e’) Éléments e directement précédés d’un élément p
(‘p ~ e’) Éléments e précédés d’un élément p
:empty Éléments qui n’ont pas d’enfant
:first-child Premier enfant
:first Premier élément
:last-child Dernier enfant
:last Le dernier élément de la sélection
:nth-child() Élément qui est l’énième enfant de son parent
:only-child Éléments qui sont enfants uniques de leur parent

 

Pour vous entrainer à utiliser ces sélecteurs, tapez le code suivant dans Notepad++ et sauvegardez-le dans le fichier selecteurs-hierarchiques.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs hiérarchiques</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Sélecteurs hiérarchiques</h2>
    <div id="contenu">
    <p>Première liste</p>
    <ul>
      <li>un
      <li>deux
      <li>trois
      <li>quatre
    </ul>
    </div>
    <p>Deuxième liste</p>
    <ol>
      <li>premier
      <li>deuxième
      <li>troisième
    </ol>

    <script>
      $(function() {
      });
    </script>
  </body>
</html>

 

Exercice : Colorer en rouge le premier li

Solution : $(‘li:first-child’).css(‘color’,’red’);

 

Exercice : Colorer en rouge le troisième li

Solution : $(‘li:nth-child(3)’).css(‘color’,’red’);

 

Exercice : Colorer en rouge les li descendants de ul

Solution : $(‘ul>li’).css(‘color’,’red’);

 

Exercice : Colorer en rouge le dernier li descendant de ol

Solution : $(‘ol>li:last-child’).css(‘color’,’red’);


Vous savez maintenant créer des listes à puces et numérotées. Que diriez-vous de créer des listes sur plusieurs niveaux hiérarchiques ?

Il suffit pour cela d’imbriquer deux ou plusieurs balises <ul> ou <ol>. A titre d’exemple, nous allons imbriquer plusieurs listes à puces dans une liste numérotée pour obtenir le résultat suivant.

Examinons le code utilisé :

Comme vous pouvez le voir, la liste principale est une liste numérotée délimitée par les balises <ol> et </ol>. Cette liste contient quatre entrées <li></li>.

Dans la première entrée, une liste à puces <ul> de type square est définie. Cette liste contient une autre liste à puces <ul> de type circle, composée de quatre entrées. Les différents niveaux d’imbrication sont automatiquement indentés vers la droite.

La troisième entrée <li> de la liste principale contient une liste à puces de type square, composée de trois entrées.