Se déplacer dans le DOM ou traverser le DOM
Introduction
JQuery permet de sélectionner un ou plusieurs éléments à l'aide de sélecteurs CSS ou de pseudo-sélecteurs jQuery. A la suite de cette première sélection, il est possible de l’affiner en utilisant les méthodes décrites dans les cours précédents, de niveaux inférieurs.
Comme vu précédemment, il est possible de sélectionner des éléments en jQuery grâce aux sélecteurs CSS. Par exemple :
<body>
<p class="first">Je suis un paragraphe</p>
<p id="second">Je suis un autre paragraphe</p>
<script type="text/javascript">
$(document).ready(function(){
// sélection de l'élément HTML possédant
// la classe "first"
$(".first");
// sélection de l'élément HTML possédant
// l'id "second"
$("#second");
});
</script>
</body>
Cependant, ce n'est pas le seul moyen d'accéder aux éléments du DOM. Les sélections effectuées dans l’exemple ci-dessus constituent en réalité des sélections initiales. C’est-à-dire qu’il est possible d’appliquer d’autres méthodes jQuery qui permettent de “parcourir” le DOM en se basant sur cette sélection initiale.
Accéder à l’élément parent ou aux ancêtres d’un élément en jQuery
Les méthodes parent(), parents(), parentsUntil() et closest() permettent d'accéder aux parents et ancêtres d'un élément ou d'une collection d'éléments.
La méthode parent() permet d'accéder à l'élément parent de notre sélection initiale, qu’elle soit constituée par un ou plusieurs éléments. Il est possible de lui passer un sélecteur en argument, ce qui filtrera la sélection et ne retournera son élément parent que si l'élément correspond audit sélecteur.
<body>
<ul id="parents">
<li>Element</li>
<li>Element</li>
<li>element</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
// Cible l'élément parent direct de chaque élément
// li et ajoute une bordure autour
$("li").parent().css("border", "10px solid black");
// Cible l'élément parent direct de chaque élément
// li uniquement si il possède un id="parents" et
// change la couleur de fond en rouge
$("li").parent("#parents").css("background-color", "red");
});
</script>
</body>
La méthode parents() permet d'accéder à tous les ancêtres d'un élément ou d'un groupe d’éléments sélectionné. Cette méthode sera la même que parent() et accédera également au sélecteur pouvant être passé en tant qu’argument.
<body>
<div>
<ul id="parents">
<li>Element</li>
<li>Element</li>
<li>element</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Sélectionne tous les ancêtres des éléments ul et ajoute
// une bordure noire d'10px autour de chacun d'entre eux
$("ul").parents().css("border", "10px solid black");
// Ne cible que les ancêtres des éléments ul qui sont des
// div et change leur couleur de fond en rouge
$("ul").parents("div").css("background-color", "red");
});
</script>
</body>
La méthode parentUntil() permet également d'accéder aux ancêtres d'un élément ou d'un groupe d'éléments jusqu'à l'ancêtre correspondant au sélecteur passé en premier argument de la méthode.
Il est également possible de passer un second sélecteur en tant que deuxième argument, qui jouera le rôle de filtre pour la méthode parentUntil().
<body>
<div class="container">
<ul id="child filter">
<li>Element</li>
<li>Element</li>
<li>element</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Sélectionne tous les ancêtres de l'élément qui possède l'id="child"
// jusqu'au premier ancêtre possédant une class="container" sans l'inclure
$("#child").parentsUntil(".container").css("border", "10px solid black");
// Sélectionne tous les ancêtres de l'élément qui possède l'id="child"
// jusqu'au premier ancêtre possédant une class="container" et la classe
// "filter" en filtre sans l'inclure
$("#child").parentsUntil(".container", ".filter").css("border", "10px solid red");
});
</script>
</body>
La méthode closest() permet de sélectionner le premier ancêtre correspondant au sélecteur qui lui est passé en argument.
<body>
<div>
<ul id="parents" class="red">
<li class="li">Element</li>
<li>Element</li>
<li>Element</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Sélectionne l'ancêtre div le plus proche de l'élément
// possédant l'id "parents"
$("#parents").closest("div").css("border", "10px solid black");
// Sélectionne l'ancêtre possédant une class="red" le plus
// proche des éléments possédant une class="li"
$(".li").closest(".blue").css("color", "red");
});
</script>
</body>
Accéder aux enfants ou descendants d’un élément en jQuery
Les méthodes children() et find() permettent d'accéder aux enfants et aux descendants de l'élément ou de la collection d'éléments initialement sélectionnés dans jQuery.
La méthode children() permet d'accéder aux éléments enfants d'un ou de plusieurs éléments du DOM. Nous pourrons lui passer un sélecteur en argument, qui servira de filtre pour ne sélectionner que les enfants correspondant à celui-ci.
La méthode find() permet de sélectionner tous les descendants d'un élément ou d'une collection d'éléments. Pour l’utiliser, il faut lui préciser un sélecteur en argument, qui servira de filtre pour ne sélectionner que les descendants correspondant à celui-ci.
<body>
<div class="container">
<div id="methods">
<ul id="parents">
<li class="background">Element</li>
<li>Element</li>
<li>Element</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Sélectionne tous les enfants (descendants directs) des
// éléments possédant un attribut class="container"
$(".container").children().css("border", "10px solid black");
// Sélectionne uniquement les éléments h1 descendants directs
// des éléments possédant un attribut classe "container"
$(".container").children("h1").css("color", "red");
// Cible tous les descendants de l'élément possédant l'id
// "methods" qui possèdent un attribut class="background"
$("#methods").find(".background").css("background-color", "orange");
});
</script>
</body>
Besoin d'aide ?
Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !
