Médiaforma

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

Print Friendly

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>
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply