jQuery Academy · Leçon

Filtrage avancé avec .filter()

Filtrage avancé avec .filter() est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.

Affiner les sélections avec .filter()

La méthode .filter() de jQuery est un moyen puissant de réduire un ensemble existant d'éléments sélectionnés. Elle vous permet de ne conserver que les éléments qui correspondent à des critères précis.

Considérez-la comme une seconde couche de sélection, appliquée après votre sélection initiale pour obtenir une plus grande précision.

Filtrage de base avec des sélecteurs

La manière la plus simple d'utiliser .filter() consiste à fournir une chaîne de sélecteur CSS. Cela fonctionne comme un sélecteur standard, mais s'applique uniquement aux éléments déjà présents dans votre ensemble jQuery actuel.

Sélectionnons tous les div possédant la classe .item, puis filtrons-les pour ne conserver que ceux qui possèdent également la classe .active.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <div class="item">Item 1</div>
  <div class="item active">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item active">Item 4</div>

  <script>
    $(document).ready(function(){
      // Select all divs with class 'item'
      var allItems = $('div.item');
      // Then filter to keep only those with class 'active'
      var activeItems = allItems.filter('.active');
      activeItems.css('color', 'blue');
    });
  </script>
</body>
</html>

Logique personnalisée avec une fonction

La véritable puissance de .filter() se révèle lorsque vous lui transmettez une fonction comme argument. Cela vous permet d'appliquer à chaque élément de votre sélection une logique hautement personnalisée et dynamique.

La fonction s'exécute pour chaque élément de l'ensemble jQuery actuel.
Elle reçoit deux arguments : index (la position de l'élément dans l'ensemble) et element (l'élément DOM brut).
Renvoyez true pour conserver l'élément et false pour le retirer de l'ensemble filtré.

Filtrer selon la position dans l'index

Vous pouvez utiliser l'argument index dans votre fonction de filtrage pour sélectionner des éléments selon leur position dans l'ensemble jQuery actuel. Cela est utile pour des tâches telles que la sélection d'un élément de liste sur deux ou de plages précises.

Sélectionnons un élément de liste sur deux (ceux dont l'index est pair, en commençant à 0) et mettons-les en évidence.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Item 0</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function(index) {
        // Keep items at even indices (0, 2, 4...)
        return index % 2 === 0;
      }).css('background-color', 'lightgreen');
    });
  </script>
</body>
</html>

Selon les attributs et les propriétés

L'argument element (ou $(this) dans la fonction) vous permet d'examiner les propriétés, les attributs ou le contenu textuel de chaque élément DOM. Cela permet un filtrage très précis.

Ici, nous allons trouver tous les éléments de liste dont le texte contient le mot « Important » et les mettre en gras.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Property</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Task 1</li>
    <li>Important Task 2</li>
    <li>Task 3</li>
    <li>Another Important Task 4</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check if the text content includes "Important"
        return $(this).text().includes('Important');
      }).css('font-weight', 'bold');
    });
  </script>
</body>
</html>

Filtrage dynamique avec des données

Les attributs de données HTML5 (par exemple, data-status="active") sont parfaits pour stocker directement dans les éléments des informations supplémentaires propres à l'application. Vous pouvez utiliser .filter() pour sélectionner des éléments selon ces valeurs de données personnalisées.

Mettons en évidence les éléments de liste marqués comme « complete » à l'aide de leur attribut data-status.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li data-status="pending">Task A</li>
    <li data-status="complete">Task B</li>
    <li data-status="pending">Task C</li>
    <li data-status="complete">Task D</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check the 'data-status' attribute
        return $(this).data('status') === 'complete';
      }).css('text-decoration', 'line-through');
    });
  </script>
</body>
</html>

Filtrer selon un élément enfant ou parent

Votre fonction de filtrage peut également examiner les relations entre les éléments. Par exemple, vous pouvez vouloir sélectionner des éléments parents qui contiennent un enfant précis, ou inversement.

Ici, nous allons trouver les éléments de liste qui contiennent une balise <img> et leur ajouter une bordure.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Relationship</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Text only</li>
    <li>Item with <img src="https://placehold.co/16x16" alt="icon"></li>
    <li>Another text item</li>
    <li>Item with another <img src="https://placehold.co/16x16" alt="image"></li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check if the current <li> contains an <img>
        return $(this).find('img').length > 0;
      }).css('border', '2px solid orange');
    });
  </script>
</body>
</html>

Filtres complexes avec la logique

Dans votre fonction de filtrage, vous pouvez combiner plusieurs conditions à l'aide des opérateurs logiques JavaScript courants comme && (AND) et || (OR).

Cela permet d'effectuer des sélections très précises selon plusieurs critères à la fois, ce qui rend votre filtrage extrêmement puissant :

Est-il visible ? AND possède-t-il une classe précise ?
Contient-il le texte « X » ? OR possède-t-il l'attribut de données « Y » ?

Filtrage dynamique en situation réelle

Mettons en pratique ce que nous avons appris. Imaginez que vous filtriez une liste de produits selon plusieurs critères. Votre fonction de filtrage peut vérifier dynamiquement plusieurs conditions.

Cet exemple met en évidence les produits qui sont à la fois visibles et appartiennent à la catégorie « electronics », en utilisant une logique combinée dans la fonction de filtrage.

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Filtering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .hidden { display: none; }
</style>
</head>
<body>
  <div class="product" data-category="electronics">Laptop</div>
  <div class="product hidden" data-category="books">Novel</div>
  <div class="product" data-category="electronics">Mouse</div>
  <div class="product" data-category="books">Textbook</div>

  <script>
    $(document).ready(function(){
      $('div.product').filter(function() {
        // Filter products that are visible AND in 'electronics' category
        var isVisible = $(this).is(':visible');
        var isElectronics = $(this).data('category') === 'electronics';
        return isVisible && isElectronics;
      }).css('background-color', 'lightblue');
    });
  </script>
</body>
</html>

Défi : filtrage

Étant donné le code HTML <li class="item special" data-value="10">...</li>, quelle fonction .filter() sélectionne correctement uniquement les éléments <li> qui possèdent la classe .special ET une valeur data-value supérieure à 5 ?

Récapitulatif : la puissance du filtrage dynamique

Vous maîtrisez désormais les utilisations avancées de la méthode .filter() de jQuery !

Elle affine les sélections existantes et offre un contrôle précis.
L'utilisation d'une fonction permet de réaliser un filtrage dynamique et complexe.
Vous pouvez examiner les index, les propriétés des éléments, les attributs de données et les relations.
Combinez plusieurs conditions avec && (AND) et || (OR) pour obtenir des critères très précis.

Cette méthode puissante vous permet de créer des interfaces utilisateur extrêmement réactives et pilotées par les données.

Questions Fréquemment Posées

La leçon « Filtrage avancé avec .filter() » est-elle gratuite ?

Oui — le texte complet de « Filtrage avancé avec .filter() » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Filtrage avancé avec .filter() » ?

Explorez toute la puissance de la méthode .filter(), en utilisant des fonctions pour appliquer une logique personnalisée et sélectionner des éléments selon des propriétés ou des relations dynamiques. Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.

Combien de temps prend la leçon « Filtrage avancé avec .filter() » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?

Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Création de pseudo-sélecteurs personnalisés
Filtrage avancé avec .filter()
Exclusion d’éléments avec .not()

← Retour à jQuery Academy