Selettori gerarchici in jQuery

I selettori gerarchici in jQuery consentono di selezionare elementi basandosi sulla loro relazione nella struttura del DOM, come gli elementi figli, discendenti, fratelli o genitori. Inoltre, i selettori gerarchici offrono un approccio più dinamico e flessibile alla manipolazione del DOM, consentendo agli sviluppatori, come accennavamo nello scorso capitolo, di creare selezioni più complesse, strutturate e sofisticate. Vediamo, a seguire, quali sono i selettori gerarchici in jQuery.

Selettore discendente in jQuery

Il selettore discendente in jQuery seleziona tutti gli elementi discendenti di un dato elemento

Esempio: $("div p") seleziona tutti i paragrafi (p) che si trovano all'interno di un <div>.

Selettore figlio diretto in jQuery

Il selettore figlio diretto in jQuery seleziona tutti gli elementi che sono figli diretti di un elemento specifico.

Esempio: $("ul > li") trova tutti gli elementi <li> che sono figli diretti di un <ul>.

Selettore di elementi adiacenti in jQuery

Il selettore di elementi adiacenti in jQuery seleziona tutti gli elementi adiacenti direttamente dopo un elemento specifico.

Esempio: $("#id-unico + p") seleziona il paragrafo immediatamente successivo all'elemento con l'ID id-unico.

Selettore di sibling generali in jQuery

Il Selettore di sibling generali in jQuery trova tutti i sibling (fratelli) di un elemento che condividono lo stesso genitore.

Esempio: $("#id-unico ~ div") seleziona tutti i <div> che sono sibling dell'elemento con l'ID id-unico.

Abbiamo esplorato in dettaglio i selettori gerarchici in jQuery, scoprendo come consentano di selezionare elementi in base alla loro relazione all’interno della struttura del DOM. Tuttavia, la nostra panoramica dei selettori in jQuery non finisce qui. Abbiamo appena iniziato a esplorare l’ampia gamma di possibilità offerte da questo potente strumento. Nel prossimo capitolo, approfondiremo ulteriormente la nostra comprensione dei selettori, esplorando i selettori per attributi.