OUJOOD.COM
Définition et Usage sélecteur :even
Le sélecteur :even de jQuery est utilisé pour sélectionner un élément dont l'indice est un nombre pair. Le numéro de l'index commence à 0. Le fonctionnement est le même que celui du sélecteur :odd pour la sélection des nombres impairs mais pour les nombres pairs.
Le sélecteur :even sélectionne chaque élément avec un numéro d'index pair (comme: 0, 2, 4, 6, 8...).
Les numéros d'index dans les tableaux commencent à 0, donc le premier élément sera un nombre pair (0). C'est pourquoi il est important de comprendre que :
- Index 0 = Premier élément (pair)
- Index 1 = Deuxième élément (impair)
- Index 2 = Troisième élément (pair)
- Et ainsi de suite...
Pour sélectionner tous les éléments indexés et pair dans un groupe, le sélecteur :even doit surtout être utilisé avec un autre sélecteur (comme dans l'exemple ci-dessous). Il peut être combiné avec d'autres sélecteurs CSS pour cibler précisément les éléments souhaités.
Syntaxe
$(":even") - Sélectionne tous les éléments pairs
$("tr:even") - Sélectionne toutes les lignes de tableau paires
$("li:even") - Sélectionne tous les éléments de liste pairs
Cas d'usage courants du sélecteur :even
Le sélecteur :even est particulièrement utile dans les situations suivantes :
- Tables rayées : Créer des lignes alternées pour améliorer la lisibilité
- Listes d'éléments : Styler différemment les éléments pairs et impairs
- Galeries d'images : Appliquer des effets alternés
- Formulaires : Distinguer visuellement les champs
Démonstration interactive
Voici une démonstration interactive qui vous permet de voir le fonctionnement du sélecteur :even en temps réel :
🎯 Testez le sélecteur :even
| Index | Nom | Prénom | Âge |
|---|---|---|---|
| 0 (pair) | Anders | Maria | 28 |
| 1 (impair) | Berglund | Christina | 27 |
| 2 (pair) | Chang | Francisco | 25 |
| 3 (impair) | Mendel | Roland | 31 |
| 4 (pair) | Bennett | Helen | 22 |
| 5 (impair) | Cramer | Philip | 45 |
💡 Cliquez sur les boutons ci-dessus pour voir quelles lignes sont sélectionnées par :even et :odd
Exemple : sélectionner les élément tr dont l'index pair
Exemple : 📝 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery sélecteur élément pair et even</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Sélectionne toutes les lignes avec un index pair
$("tr:even").css("background-color", "#f0f8ff");
// Alternative avec une classe CSS
$("tr:even").addClass("ligne-paire");
// Exemple avec effet au survol
$("tr:even").hover(
function() { $(this).css("background-color", "#e6f3ff"); },
function() { $(this).css("background-color", "#f0f8ff"); }
);
});
</script>
<style>
.ligne-paire {
background-color: #f0f8ff;
transition: background-color 0.3s ease;
}
</style>
</head>
<body>
<h1>Liste de mes amis</h1>
<table border="1" cellpadding="8" cellspacing="0">
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Âge</th>
</tr>
<tr>
<td>Anders</td>
<td>Maria</td>
<td>28</td>
</tr>
<tr>
<td>Berglund</td>
<td>Christina</td>
<td>27</td>
</tr>
<tr>
<td>Chang</td>
<td>Francisco</td>
<td>25</td>
</tr>
<tr>
<td>Mendel</td>
<td>Roland</td>
<td>31</td>
</tr>
<tr>
<td>Bennett</td>
<td>Helen</td>
<td>22</td>
</tr>
<tr>
<td>Cramer</td>
<td>Philip</td>
<td>45</td>
</tr>
<tr>
<td>Tannamuri</td>
<td>Yoshi</td>
<td>18</td>
</tr>
<tr>
<td>Rovelli</td>
<td>Giovanni</td>
<td>42</td>
</tr>
<tr>
<td>Crowther</td>
<td>Simon</td>
<td>36</td>
</tr>
</table>
</body>
</html>
🔍 Explication du fonctionnement :
Ce que fait cet exemple :
$("tr:even").css("background-color", "#f0f8ff"): Applique une couleur de fond bleu clair à toutes les lignes avec un index pair (0, 2, 4, 6, 8...)$("tr:even").addClass("ligne-paire"): Ajoute la classe CSS "ligne-paire" aux mêmes lignes pour un style uniforme$("tr:even").hover(...): Crée un effet interactif au survol de la souris qui change temporairement la couleur
Résultat visuel : Les lignes "Anders", "Chang", "Bennett", "Tannamuri" et "Crowther" auront un fond coloré car elles correspondent aux index 0, 2, 4, 6 et 8.
Exemples d'utilisation avancée
Exemple : 📝 Copier le code
// Sélectionner les éléments de liste pairs
$("ul li:even").css("font-weight", "bold");
// Combiner avec d'autres sélecteurs
$(".ma-classe:even").fadeIn();
// Appliquer différents styles
$("div:even").css({
"background-color": "#f5f5f5",
"border-left": "3px solid #007cba"
});
// Avec des événements
$("tr:even").click(function() {
alert("Ligne paire cliquée : " + $(this).text());
});
// Animation sur les éléments pairs
$("img:even").animate({
opacity: 0.7,
marginLeft: "10px"
}, 1000);
🔍 Explication des techniques avancées :
Chaque ligne de code expliquée :
$("ul li:even").css("font-weight", "bold"): Met en gras les éléments de liste pairs (1er, 3ème, 5ème...)$(".ma-classe:even").fadeIn(): Fait apparaître en fondu uniquement les éléments pairs ayant la classe "ma-classe"$("div:even").css({...}): Applique plusieurs styles CSS simultanément (fond gris + bordure bleue) aux div pairs$("tr:even").click(...): Ajoute un événement clic qui affiche le contenu de la ligne paire cliquée$("img:even").animate({...}, 1000): Anime les images paires (opacité + déplacement) sur 1 seconde
Utilité : Ces exemples montrent comment combiner :even avec différentes méthodes jQuery pour créer des interfaces dynamiques et interactives.
Points importants à retenir
- L'indexation commence à 0 : Le premier élément (index 0) est considéré comme pair
- Compatible avec tous les éléments HTML : tr, li, div, p, img, etc.
- Peut être combiné avec d'autres sélecteurs CSS pour plus de précision
- Performance : Plus rapide que les sélecteurs CSS complexes
- Alternative CSS3 : Le sélecteur CSS
:nth-child(even)offre une fonctionnalité similaire
Différence avec CSS :nth-child()
Il est important de noter que :
- jQuery :even : Compte tous les éléments sélectionnés (commence à 0)
- CSS :nth-child(even) : Compte les enfants dans leur parent (commence à 1)
Cette différence peut créer des résultats différents selon le contexte d'utilisation.
Par gerywa 25 juillet 2014 - Mis à jour avec démonstration interactive