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