Médiaforma

jQuery – Effectuer des traitements plus complexes sur une sélection d’éléments

Partagez cet article sur vos réseaux

Vous pouvez utiliser la fonction each() sur une sélection pour lui appliquer des traitements nombreux et/ou complexes. Voici la syntaxe à utiliser (index représente l’index des éléments parcourus) :

$('sélecteur').each(function(index){
  // Traitement
});

Pour accéder individuellement à chacun des éléments parcourus, vous utiliserez le mot this.

Tapez le code suivant dans NotePad++ et sauvegardez-le sous le nom each.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <span></span> <span></span> <span></span> <span></span> <span></span>
    <script>
      $(function() {
        $('span').each(function(index){
          this.innerHTML = index;
        });
      });
    </script>
  </body>
</html>

Examinez le code. Quel va être le résultat selon vous ?

Le corps du document contient 5 éléments span. Le code jQuery affiche la valeur de l’index dans chacun des span. On peut donc s’attendre à l’affichage des chiffres 0 à 4.

 

 

Exercice : Définissez un tableau de 16×10 où sont affichés les nombres hexadécimaux compris entre #0 et #9f. Voici le résultat à obtenir :

 

Pour cela, vous utiliserez la fonction each() et la fonction toString(16) pour convertir un nombre en hexadécimal.

 

Solution :

Voici le code utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Nombres hexadécimaux</title>
    <script src="jquery.js"></script>
    <style>
      td {width: 40px; text-align: center; height:10px;}
    </style>
  </head>
  <body>
    <table border>
    <tr><td>1</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </table>
    <script>
      $(function() {
        $('td').each(function(index){
          this.innerHTML='#'+index.toString(16);
        });
      });
    </script>
  </body>
</html>
 
Commentaires

Aucun commentaire pour l'instant.

Laissez un commentaire