oujood.com

jQuery : sélecteur des élément pair (:even)

Le  sélecteur :even sélectionne chaque élément avec un  numéro d'index  pair(comme: 0, 2, 4)
Dans ce tutoriel on va voir comment on peut utiliser ce sélecteur.

chercher |

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).

Les numéros d'index dans les tableaux commencent à 0, donc le premier élément sera un nombre pair (0).

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).

Syntaxe

$(":even")

Exemple : sélectionner les élément tr dont  l’index pair

Exemple :       Copier le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery selecteur élément pair et even </title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){$("tr:even").css("background-color","#ccc");
  });
  </script>
  </head>
  <body>
  <h1>Liste de mes amis</h1>
  <table>
  <tr>
    <th>Nom</th> <th>Prenom</th> <th>Age</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>



Par gerywa 25 juillet 2014

Voir aussi nos tutoriel :

fonction strcasecmp, strcasecmp

Comparaison insensible la casse de chaînes binaires

fonction substr_replace, substr_replace

Remplace un segment dans une chaîne

Utiliser les class et id en css

Affecter des styles différents à de mêmes balises. Le concept des attributs: class et id....