0Pricing
jQuery Academy · Lezione

Esclusione degli elementi con .not()

Padroneggiare il metodo .not() per escludere con precisione specifici elementi da un insieme di elementi selezionati, perfezionando le selezioni ed evitando operazioni indesiderate.

Esclusione degli elementi con .not() è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.

Introduzione a .not()

Benvenuto! In questa lezione imparerà a usare il potente metodo .not() di jQuery. È essenziale per affinare le selezioni degli elementi.

Il metodo .not() consente di escludere elementi specifici da un insieme di elementi corrispondenti, offrendo un controllo preciso sugli elementi interessati dalle operazioni.

Esclusione tramite una stringa di selettore

Il modo più comune di usare .not() consiste nel passare una stringa di selettore CSS. jQuery rimuoverà quindi dalla selezione corrente tutti gli elementi che corrispondono a questo nuovo selettore.

  • Selezioni prima in modo ampio.
  • Quindi usi .not() per filtrare gli elementi indesiderati.

È utile quando è più semplice selezionare 'tutto' e poi specificare cosa 'rimuovere'.

.not() con un selettore di classe

Provi questo esempio. Selezioneremo tutti gli elementi div, quindi useremo .not() per escludere quelli con la classe .special. Verranno applicati gli stili solo ai div non speciali.

<!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>

Esclusione di elementi specifici

Oltre a una stringa di selettore, è possibile passare direttamente a .not() un elemento DOM o un oggetto jQuery.

È utile quando si dispone già di un riferimento all'elemento esatto (o agli elementi esatti) da escludere dalla selezione corrente.

.not() con un riferimento a un elemento

In questo esempio selezioniamo tutti gli elementi dell'elenco (<li>). Quindi individuiamo un elemento specifico tramite il suo ID (#item2) e usiamo .not() per escluderlo dall'operazione di applicazione degli stili.

<!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>

Esclusione personalizzata con una funzione

Per una logica di esclusione altamente dinamica o complessa, è possibile passare una funzione a .not().

  • La funzione viene eseguita per ogni elemento dell'insieme corrente.
  • Se la funzione restituisce true, l'elemento viene escluso.
  • this fa riferimento all'elemento DOM corrente in elaborazione.

.not() con una funzione: esempio

In questo caso desideriamo applicare uno stile a tutti i paragrafi tranne quelli che contengono la parola 'exclude'. La funzione controlla il contenuto testuale di ogni paragrafo.

<!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>

Concatenare .not() per una maggiore precisione

È possibile concatenare più chiamate a .not() o combinare .not() con altri metodi di filtraggio per creare selezioni estremamente precise.

Ogni chiamata a .not() affina ulteriormente l'insieme corrente di elementi, rimuovendone altri a ogni passaggio. Lo si può considerare come la rimozione progressiva degli strati di elementi non necessari.

Quando usare .not()

.not() è estremamente utile negli scenari in cui:

  • Si dispone di un'ampia selezione iniziale e si desidera rimuovere alcuni tipi specifici.
  • È necessario escludere un elemento di cui si possiede già un riferimento diretto.
  • Esprimere 'tutti *tranne* questi' rende il codice più chiaro e leggibile.

È un modo elegante per restringere l'attenzione senza scrivere in anticipo selettori negativi complessi.

Verifica rapida: usare .not()

Consideri il seguente HTML. Quale frammento di codice jQuery selezionerebbe correttamente tutti gli elementi <p> tranne quello con ID "intro"?

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

Riepilogo: padroneggiare .not()

Ha acquisito con successo padronanza del metodo .not() di jQuery!

Abbiamo imparato che .not() è fondamentale per affinare le selezioni escludendo elementi in base a:

  • Una stringa di selettore CSS (ad esempio .not('.hide'))
  • Un elemento DOM specifico o un oggetto jQuery (ad esempio .not(myElement))
  • Una funzione per una logica di esclusione personalizzata e dinamica.

Continui a esercitarsi per rendere le selezioni jQuery più precise ed efficienti!

Domande Frequenti

La lezione «Esclusione degli elementi con .not()» è gratuita?

Sì — il testo completo di «Esclusione degli elementi con .not()» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.

Cosa imparerò in «Esclusione degli elementi con .not()»?

Padroneggiare il metodo .not() per escludere con precisione specifici elementi da un insieme di elementi selezionati, perfezionando le selezioni ed evitando operazioni indesiderate. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare jQuery Academy?

Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.

Quanto tempo richiede la lezione «Esclusione degli elementi con .not()»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione jQuery Academy?

Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Creazione di pseudo-selettori personalizzati
  2. Filtraggio avanzato con .filter()
  3. Esclusione degli elementi con .not()
← Torna a jQuery Academy