0Pricing
jQuery Academy · Leçon

Exclusion d’éléments avec .not()

Maîtrisez la méthode .not() pour exclure précisément certains éléments d’un ensemble correspondant, affiner vos sélections et éviter les opérations involontaires sur certains éléments.

Exclusion d’éléments avec .not() est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Introduction à .not()

Bienvenue ! Dans cette leçon, vous allez maîtriser la puissante méthode .not() de jQuery. Elle est essentielle pour affiner vos sélections d'éléments.

La méthode .not() vous permet d'exclure des éléments précis d'un ensemble d'éléments correspondants, vous donnant ainsi un contrôle précis sur les éléments affectés par vos opérations.

Exclure avec une chaîne de sélecteur

La manière la plus courante d'utiliser .not() consiste à lui transmettre une chaîne de sélecteur CSS. jQuery supprime alors de la sélection actuelle tous les éléments qui correspondent à ce nouveau sélecteur.

  • Commencez par effectuer une sélection large.
  • Utilisez ensuite .not() pour filtrer les éléments indésirables.

C'est utile lorsqu'il est plus simple de sélectionner « tout », puis de préciser ce que vous souhaitez « supprimer ».

.not() avec un sélecteur de classe

Essayez cet exemple. Nous allons sélectionner tous les éléments div, puis utiliser .not() pour exclure ceux qui possèdent la classe .special. Seuls les éléments div qui ne sont pas spéciaux seront mis en forme.

<!DOCTYPE html>
<html>
<head>
<style>
  .red { color: red; }
</style>
</head>
<body>
  <div class="box">Item 1</div>
  <div class="box special">Item 2</div>
  <div class="box">Item 3</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all .box divs, then exclude the one with .special
      $('.box').not('.special').addClass('red');
    });
  </script>
</body>
</html>

Exclure des éléments précis

En plus d'une chaîne de sélecteur, vous pouvez également transmettre directement un élément DOM ou un objet jQuery à .not().

C'est pratique lorsque vous disposez déjà d'une référence vers l'élément exact (ou les éléments exacts) que vous souhaitez exclure de votre sélection actuelle.

.not() avec une référence d'élément

Dans cet exemple, nous sélectionnons tous les éléments de liste (<li>). Ensuite, nous identifions un élément précis grâce à son ID (#item2) et utilisons .not() pour l'exclure de notre opération de mise en forme.

<!DOCTYPE html>
<html>
<head>
<style>
  .bold { font-weight: bold; }
</style>
</head>
<body>
  <ul>
    <li>List Item 1</li>
    <li id="item2">List Item 2</li>
    <li>List Item 3</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all <li>, then exclude the specific #item2
      $('li').not($('#item2')).addClass('bold');
    });
  </script>
</body>
</html>

Exclusion personnalisée avec une fonction

Pour une logique d'exclusion très dynamique ou complexe, vous pouvez transmettre une fonction à .not().

  • La fonction s'exécute pour chaque élément de l'ensemble actuel.
  • Si la fonction renvoie true, l'élément est exclu.
  • this fait référence à l'élément DOM actuel en cours de traitement.

.not() avec une fonction : exemple

Ici, nous voulons mettre en forme tous les paragraphes, sauf ceux qui contiennent le mot « exclude ». La fonction vérifie le contenu textuel de chaque paragraphe.

<!DOCTYPE html>
<html>
<head>
<style>
  .italic { font-style: italic; }
</style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p>This paragraph contains 'exclude'.</p>
  <p>Another normal paragraph here.</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('p').not(function() {
        // Exclude paragraphs containing 'exclude'
        return $(this).text().includes('exclude');
      }).addClass('italic');
    });
  </script>
</body>
</html>

Enchaîner .not() pour plus de précision

Vous pouvez enchaîner plusieurs appels à .not() ou combiner .not() avec d'autres méthodes de filtrage afin de créer des sélections très précises.

Chaque appel à .not() affine davantage l'ensemble actuel d'éléments et en retire progressivement d'autres. Imaginez que vous retiriez couche après couche les éléments dont vous n'avez pas besoin.

Quand utiliser .not()

.not() est particulièrement utile dans les situations suivantes :

  • Vous avez une sélection initiale large et souhaitez supprimer quelques types précis.
  • Vous devez exclure un élément dont vous possédez déjà une référence directe.
  • Exprimer « tous sauf ceux-ci » rend votre code plus clair et plus lisible.

C'est une manière élégante de réduire votre champ d'action sans écrire au préalable des sélecteurs négatifs complexes.

Vérification rapide : utiliser .not()

Considérez le code HTML suivant. Quel extrait de code jQuery sélectionnerait correctement tous les éléments <p> à l'exception de celui dont l'ID est "intro" ?

<div>
  <p>Paragraph 1</p>
  <p id="intro">Introduction</p>
  <p>Paragraph 3</p>
</div>

Récapitulatif : maîtriser .not()

Vous maîtrisez désormais la méthode .not() de jQuery !

Nous avons appris que .not() est essentielle pour affiner les sélections en excluant des éléments selon :

  • Une chaîne de sélecteur CSS (par exemple, .not('.hide'))
  • Un élément DOM précis ou un objet jQuery (par exemple, .not(myElement))
  • Une fonction pour appliquer une logique d'exclusion personnalisée et dynamique.

Continuez à vous entraîner pour rendre vos sélections jQuery plus précises et plus efficaces !

Questions Fréquemment Posées

La leçon « Exclusion d’éléments avec .not() » est-elle gratuite ?

Oui — le texte complet de « Exclusion d’éléments avec .not() » 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 « Exclusion d’éléments avec .not() » ?

Maîtrisez la méthode .not() pour exclure précisément certains éléments d’un ensemble correspondant, affiner vos sélections et éviter les opérations involontaires sur certains éléments. 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 3 sur 3.

Combien de temps prend la leçon « Exclusion d’éléments avec .not() » ?

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

  1. Création de pseudo-sélecteurs personnalisés
  2. Filtrage avancé avec .filter()
  3. Exclusion d’éléments avec .not()
← Retour à jQuery Academy