Médiaforma

jQuery – Sélecteurs hiérarchiques

Print Friendly

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 avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply