Come filtrare gli elementi HTML in jQuery

JQuery è una libreria JavaScript con sintassi più facile da apprendere. Come la sua lingua madre JS, JQuery può anche essere integrato con HTML per eseguire varie operazioni. Il jQuery fornisce il supporto per filtrare gli elementi HTML usando vari metodi che includono First (), Last (), EQ (), Slice (), Filter (), Has () e non () Metodi. Questa guida fornisce l'obiettivo di filtrare gli elementi HTML in jQuery e fornisce i seguenti risultati di apprendimento.

• Funzionamento di tutti i metodi per filtrare gli elementi HTML in jQuery
• utilizzo di ciascun metodo (con esempi)

Come filtrare gli elementi HTML in jQuery

Questa sezione arruola il funzionamento di vari metodi per filtrare gli elementi HTML in jQuery.

Come utilizzare il primo () metodo

Il primo () metodo filtra gli elementi basati su alcune condizioni e restituisce il primo elemento dagli elementi abbinati. La sintassi del primo () metodo viene visualizzata di seguito:

$ ("selettore").Primo();

Esempio

Nel codice sopra,

• il metodo First () viene applicato su selector = "P"
• Il metodo AddClass () viene applicato per differenziare l'elemento filtrato

Produzione

L'output mostra che viene selezionato solo il primo paragrafo e il suo background viene modificato usando "Primo" classe.

Come usare l'ultimo () metodo

Questo metodo restituisce l'ultimo elemento dall'insieme di elementi abbinati. Funziona sulla seguente sintassi:

$ ("selettore").scorso();

Esempio

Il codice di cui sopra pratica l'ultimo metodo () sull'elemento paragrafo e un jQuery addClass () il metodo viene aggiunto per incorporare una classe CSS.

Nota: Lo scopo della classe CSS è quello di evidenziare l'elemento abbinato.

Produzione

Come utilizzare il metodo EQ ()

Il metodo EQ () restituisce l'elemento che corrisponde al numero dell'indice dell'elemento. Questo metodo utilizza la seguente sintassi

$ ("selettore").eq ();

Il metodo EQ () accetta valori numerici positivi o negativi. Il valore positivo inizia a contare dagli elementi iniziali (o in alto) mentre l'indice del valore negativo inizia a contare dall'estremità inferiore.

Esempio

Il seguente esempio pratichi il metodo EQ () negli indici sia positivi che negativi.

Il codice è descritto di seguito,

• IL Eq (3) sta usando il numero dell'indice positivo e CSS class = "positivo"È associato al metodo EQ (3).
• IL EQ (-3) Utilizza il numero di indice negativo e la classe CSS = "negativo"Viene esercitato quando viene eseguito l'EQ (-3).

Produzione

Dall'output sopra, il Eq (3) prende l'ultimo paragrafo (come è su indice = 3) e il Filtri EQ (-3) Il terzo elemento dal basso (zero è riservato al primo elemento e -1 è per l'ultimo elemento).

Come utilizzare il metodo Slice ()

Il metodo della fetta restituisce l'intervallo specifico (definito dagli indici) degli elementi. Per utilizzare il metodo Slice (), viene praticata la seguente sintassi:

$ ("selettore").fetta (avvia, fermati);

Il metodo Slice () accetta un valore numerico positivo o negativo come criteri di avvio/arresto

• inizio: L'inizio della taglio è determinato da questo parametro
• Stop (opzionale): Questo parametro interrompe la taglio prima che venga raggiunto il numero dell'indice specificato
• Numero indice positivo: L'indicizzazione positiva inizia la selezione di elementi da un ordine di alto livello.
• Numero indice negativo: Il numero dell'indice negativo inizia a selezionare Elemetns dall'ordine inferiore.

Esempio 1: usando il numero positivo-indice

Il codice sopra è descritto come,

• IL "P"Rappresenta i paragrafi utilizzati per il"fetta()" metodo
• IL "Slice (0,2)"Mostra che la taglio inizierà dal 0 ° indice e si interrompe prima del 2 ° indice
• l'addClass ("positivo“) Il metodo aggiungerà il“positivo"Classe su elementi selezionati.

Produzione

Esempio 2: usando il numero di indice negativo

Il seguente codice pratichi il numero di indice negativo nel metodo Slice ()

• IL Slice (-2, -1) viene applicato ai paragrafi e inizierebbe dal secondo ultimo elemento e finirebbe prima dell'ultimo elemento.
• l'addClass ("negativo“) Aggiunta"negativo"Classe per gli elementi a fette.

Produzione

Come utilizzare il metodo Filter ()

Il metodo Filter () restituisce gli elementi che corrispondono a un criterio specifico. La sintassi di questo metodo è fornita di seguito:

$ ("selettore").filtro (criteri, funzione (indice));

IL criteri Il parametro è impostato per selezionare elementi e il Parametro funzione (indice) è facoltativo (esercitato quando un elemento specifico deve essere recuperato dalla selezione usando l'indice).

Esempio

Il seguente codice pratica il metodo Filter () per recuperare due paragrafi utilizzando i loro nomi ID e classi.

Il codice sopra seleziona solo quei paragrafi che hanno class = "P1"E id ="P2".

Produzione

Come utilizzare il metodo no ()

Il metodo NOT () comporterebbe gli elementi di ritorno che non rientrano nei criteri di corrispondenza. O si può dire che è l'opposto del Metodo Filtro (). La sintassi di NOT () è riportata di seguito:

$ ("selettore").non (criteri, funzione (indice));

Esempio

Nel codice sopra,

• due classi "P1" E "P2"Sono passati nel metodo non ()
• IL addClass ("not") è usato per colorare la selezione effettuata da non() metodo

Produzione

Come usare il metodo ha ()

Il metodo ha () viene praticato per ottenere l'elemento che ha elementi di filiale. La sintassi di questo metodo è fornita di seguito:

$ ("selettore").ha ("elemento");

Nella sintassi sopra, il "selettore"Che contiene il"elemento"Sarebbe recuperato solo.

Esempio

Per una migliore comprensione del metodo ha (), viene eseguito il seguente codice.

Il codice sopra traccia quello "div"Tag che ha il"paragrafo"Elemento. Inoltre, la classe CSS = "ha"Viene utilizzato per mostrare il selezionato"div"Tag.

Produzione

L'output sopra mostra che il div contenente paragrafi è selezionato solo e quello div è colorato con il colore verde della foresta.

Conclusione

jQuery supporta vari metodi come First (), Last (), Eq (), non (), ha (), slice () ecc., per filtrare gli elementi HTML. Questa guida fornisce il funzionamento e l'utilizzo di ciascun metodo uno per uno. Ogni metodo segue un filtro diverso per selezionare alcuni elementi. Ad esempio, i metodi EQ () e Slice () utilizzano i numeri dell'indice mentre altri metodi utilizzano la classe o l'ID (di un elemento) per filtrare gli elementi HTML.