Se déplacer dans le DOM ou traverser le DOM

1 h Niveau 3

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>

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !