Médiaforma

jQuery – Pseudo-sélecteurs

Print Friendly

Lorsque vous utilisez un sélecteur CSS, un ou plusieurs éléments sont sélectionnés dans le DOM. En ajoutant un pseudo-sélecteur au sélecteur, vous allez pouvoir filtrer la sélection en ne conservant que les éléments pairs, impairs, ayant un certain index, etc. Le tableau suivant regroupe les pseudo-sélecteurs utilisables en jQuery :

Sélecteur Éléments sélectionnés
:even Éléments pairs
:odd Éléments impairs
:eq() Élément dont l’index est spécifié
:gt() Éléments dont l’index est supérieur à (greater than) l’index spécifié
:lt() Éléments dont l’index est inférieur à (lower than) l’index spécifié

 

Vous avez appris à utiliser le pseudo-sélecteur :eq() pour limiter la sélection au énième élément sélectionné. Par exemple, pour surligner en jaune le deuxième li du document, utilisez cette instruction :

$('li:eq(1)').css('background-color','yellow');

 

Exercice : Quelle instruction devez-vous utiliser pour sélectionner les éléments li pairs supérieur à 2 ?

Solution : $(‘li:even:gt(1)’).css(‘background-color’,’yellow’);

 

Exercice

Tapez le code suivant et enregistrez-le dans le fichier tableau.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
   <style>
     td { width: 30px; text-align: center;}
   </style>
    <script src="jquery.js"></script>
  </head>
  <body>
    <table border>
   <tr><td>1</td><td>2</td><td>3</td></tr>
   <tr><td>a</td><td>b</td><td>c</td></tr>
   <tr><td>A</td><td>B</td><td>C</td></tr>
   <tr><td>x</td><td>y</td><td>z</td></tr>
   </table>
    <script>
      $(function() {
        // Insérer le code jQuery ici
      });
      </script>
  </body>
</html>

Insérez des instructions jQuery pour colorer les éléments td pairs en rouge et les éléments impairs en jaune.

 

Solution :

$('td:even').css('background-color','red');
$('td:odd').css('background-color','yellow');

Voici le résultat :

 

 

Plusieurs autres pseudo-sélecteurs peuvent être utilisés dans des tableaux. En voici la liste :

 

Pseudo-sélecteur Éléments sélectionnés
:first Premier élément
:last Dernier élément
:eq() Élément dont l’index est spécifié
:gt() Éléments dont l’index est supérieur à l’index spécifié
:lt() Éléments dont l’index est inférieur à l’index spécifié
:even Éléments d’index pair
:odd Éléments d’index impair
:empty Éléments qui n’ont pas d’enfant
:not() Éléments qui ne correspondent pas au sélecteur spécifié

 

Par exemple, pour colorer la première et la dernière cellule d’un tableau en vert, vous utiliserez les instructions suivantes :

$('td:first').css('background-color','green');
$('td:last').css('background-color','green');

 

 

 

Exercice : Colorez en jaune les lignes d’index supérieur à 2

Solution : $(‘tr:gt(1)’).css(‘background-color’,’yellow’);

 

Exercice : Colorez toutes les lignes en jaune sauf la dernière

Solution : $(‘tr:not(tr:last)’).css(‘background-color’,’yellow’);

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply