Share
Con jQuery, la selezione di elementi HTML è ridicolmente facile. Ma a volte, potremmo voler perfezionare ulteriormente la selezione, che può essere una seccatura quando la struttura HTML è complicata. In questo tutorial, esploreremo dieci modi in cui possiamo perfezionare ed estendere una serie di elementi avvolti su cui vogliamo operare.
Prima di tutto, diamo un'occhiata alla semplice pagina web mostrata nella figura sottostante. Selezioneremo elementi in questo tutorial.
Ma perché abbiamo bisogno di perfezionare ulteriormente un insieme di elementi? La sintassi di selezione di jQuery non è abbastanza potente?
Bene, vediamo un esempio. Nella pagina web menzionata sopra, quando si fa clic su una stella, potremmo voler aggiungere la classe "on" a questa stessa stella ea ogni singola stella alla sua sinistra. E potremmo voler cambiare il colore di sfondo del div genitore delle stelle. Quindi abbiamo il seguente codice.
Accentsconagua
$ ('. stella'). click (function () $ (this) .addClass ('on'); // Come selezionare il div genitore di 'this'? // Come selezionare le stelle sul lato sinistro di 'Questo'? ); Nella Linea 2, selezioniamo la stella che viene cliccata con 'Questo'. Ma come selezioniamo il div genitore delle stelle? Sì, è div.rating. Ma ce ne possono essere una dozzina div.ratings in una pagina, giusto? Quindi qual è quello che vogliamo? E come selezioniamo tutte le stelle a sinistra dell 'Questo'?
Fortunatamente, jQuery ci consente di ottenere nuovi set avvolti da un set esistente, in base alle relazioni gerarchiche. E questo è in parte ciò che fanno le funzioni di attraversamento.
Questa funzione ottiene i figli immediati di un insieme di elementi.
Questo può essere molto utile in una varietà di situazioni. Guarda la figura qui sotto:
Questa funzione filtra gli elementi dal set avvolto usando un'espressione selettore passata. Tutti gli elementi che non corrispondono all'espressione verranno rimossi dalla selezione.
Il seguente esempio dovrebbe essere piuttosto semplice. Le stelle piene sono filtrate da una collezione di tutte e cinque le stelle.
Al contrario di filter (), not () rimuove gli elementi corrispondenti dal set avvolto.
Vedi l'esempio qui sotto. Anche le stelle vengono rimosse dalla selezione, lasciando solo quelle dispari.
Avviso! I selettori "pari" e "dispari" sono a zero indice. Contano l'indice da 0, NON 1.
Cosa succede se vogliamo aggiungere alcuni elementi al set avvolto? La funzione add () fa questo.
Di nuovo, molto semplice. La scatola foto è stata aggiunta alla selezione.
A volte potremmo desiderare di ottenere un sottoinsieme del set avvolto, in base alla posizione degli elementi all'interno del set. E slice () è la strada da percorrere.
La funzione genitore () seleziona il genitore diretto di un insieme di elementi.
Come mostrato nella figura seguente, viene selezionato il genitore diretto della prima stella. Molto utile, hah? Va notato che verrà restituito solo il genitore diretto, motivo per cui è singolare. Nessun nonno o antenato sarà selezionato.
Questo è plurale! La funzione parents () seleziona tutti gli antenati di un insieme di elementi. Intendo TUTTI gli antenati dal genitore diretto fino acorpo' e 'html'. Quindi è meglio passare un'espressione di selettore per restringere il risultato.
Passando '.contenitore'ai genitori (), div.container, che in realtà è il nonno della prima stella, è selezionato.
Questa funzione seleziona tutti i fratelli (fratelli e sorelle) di un insieme di elementi. È possibile passare un'espressione per filtrare il risultato.
Guarda l'esempio:
La funzione prev () seleziona il fratello precedente (uno) e prevAll () seleziona tutti i fratelli precedenti di un insieme di elementi.
Questo è super pratico se stai costruendo un widget di valutazione a stelle. I fratelli precedenti della terza stella sono selezionati.
Queste funzioni funzionano allo stesso modo delle versioni precedenti e precedenti, tranne per il fatto che selezionano i fratelli SUCCESSIVO.
Alla fine, vediamo come queste funzioni risolvono un vero mal di testa per noi.
$ ('. stella'). click (function () $ (this) .addClass ('on'); // Come selezionare il div genitore di 'this'? $ (this) .parent (). addClass ( 'rated'); // Come selezionare le stelle sul lato sinistro di "this"? $ (this) .prevAll (). addClass ('on'); $ (this) .nextAll (). removeClass ('on' );); Questo è il vero problema che abbiamo menzionato all'inizio di questo tutorial, giusto? Diverse funzioni di attraversamento sono usate in queste linee di codice.
Ora, abbiamo un'idea di quanto possano essere pratiche le funzioni di attraversamento. Possono essere anche più potenti se usati insieme. L'output di una funzione può essere l'input di un'altra - vale a dire, sono concatenabili.
Grazie per aver letto! Speriamo che questo tutorial ti renda un po 'più facile la vita quando selezioni gli elementi HTML con jQuery. qualche idea? Quali funzioni di attraversamento ci siamo persi?
