Hvordan filtrere HTML -elementer i jQuery

JQuery er et JavaScript-bibliotek med mer lett å lære syntaks. I likhet med foreldrene JS, kan jQuery også integreres med HTML for å utføre forskjellige operasjoner. JQuery gir støtte til å filtrere HTML -elementer ved hjelp av forskjellige metoder som inkluderer First (), Last (), Eq (), Slice (), Filter (), har () og ikke () metoder. Denne guiden gir mål å filtrere HTML -elementer i jQuery og gir følgende læringsresultater.

• Arbeid av alle metoder for å filtrere HTML -elementer i jQuery
• Bruk av hver metode (med eksempler)

Hvordan filtrere HTML -elementer i jQuery

Denne delen verver arbeidet med forskjellige metoder for å filtrere HTML -elementer i jQuery.

Hvordan bruke den første () metoden

Den første () metoden filtrerer elementene basert på en viss tilstand og returnerer det første elementet fra de matchede elementene. Syntaksen til den første () metoden vises nedenfor:

$ ("Selector").først();

Eksempel

I koden ovenfor,

• First () Metode brukes på selektor = ”p“
• Addclass () -metoden brukes for å differensiere det filtrerte elementet

Produksjon

Utgangen viser at bare første ledd er valgt, og bakgrunnen endres ved hjelp av "først”Klasse.

Hvordan bruke den siste () metoden

Denne metoden returnerer det siste elementet fra settet med matchede elementer. Den fungerer på følgende syntaks:

$ ("Selector").siste();

Eksempel

Ovennevnte kode praktiserer den siste () -metoden på avsnittelementet og et jQuery addclass () Metoden legges til for å legge inn en CSS -klasse.

Merk: Formålet med CSS -klassen er å fremheve det matchede elementet.

Produksjon

Hvordan bruke EQ () -metode

EQ () -metoden returnerer elementet som samsvarer med indeksnummeret til elementet. Denne metoden bruker følgende syntaks

$ ("Selector").Eq ();

EQ () -metoden aksepterer numeriske verdier enten positive eller negative. Den positive verdien begynner å telle fra start- (eller øverste) elementene, mens den negative verdiindeksen begynner å telle fra bunnenden.

Eksempel

Følgende eksempel praktiserer EQ () -metoden i både positive og negative indekser.

Koden er beskrevet nedenfor,

• de Eq (3) bruker det positive indeksnummeret og CSS -klassen = ”positivt”Er assosiert med Eq (3) -metoden.
• de Eq (-3) bruker det negative indeksnummeret og CSS -klassen = ”negativ”Utøves når EQ (-3) utføres.

Produksjon

Fra ovennevnte utgang, Eq (3) henter Det siste avsnittet (som det er på indeks = 3) og Eq (-3) filtre Det tredje elementet fra bunnen (null er reservert for det første elementet og -1 er for det siste elementet).

Hvordan bruke skive () -metoden

Skivemetoden returnerer det spesifikke området (definert av indekser) av elementer. For å bruke skive () -metoden praktiseres følgende syntaks:

$ ("Selector").skive (start, stopp);

SITE () -metoden aksepterer enten positiv eller negativ numerisk verdi som start/stoppkriterier

• start: Starten på skiver bestemmes av denne parameteren
• stopp (valgfritt): Denne parameteren stopper skiveren før det spesifiserte indeksnummeret er nådd
• positivt indeksnummer: Den positive indekseringen starter utvalget av elementer fra toppordre.
• Negativt indeksnummer: Det negative indeksnummeret begynner å velge elemetns fra bunnbestillingen.

Eksempel 1: Bruke det positive indeksenummeret

Ovennevnte kode er beskrevet som,

• “p”Representerer avsnittene som brukes for“skive()”Metode
• “skive (0,2)”Viser at skiveren vil starte fra 0. indeks og stopper før 2. indeks
• tillegget (“positivt“) Metoden vil legge til“positivt”Klasse på utvalgte elementer.

Produksjon

Eksempel 2: Bruke negativt indeksnummer

Følgende kode praktiserer det negative indeksnummeret i skive () -metoden

• de skive (-2, -1) brukes på avsnitt, og det vil starte fra det nest siste elementet og slutter før før det siste elementet.
• tillegget (“negativ“) Legger til“negativ”Klasse til de skiver elementene.

Produksjon

Hvordan bruke filter () -metoden

Filter () -metoden returnerer elementene som samsvarer med et spesifikt kriterier. Syntaks for denne metoden er gitt nedenfor:

$ ("Selector").filter (kriterier, funksjon (indeks));

De Kriterier Parameter er satt til å velge elementer og Funksjon (indeks) parameter er valgfritt (utøvd når et spesifikt element skal hentes fra utvalget ved hjelp av indeksen).

Eksempel

Følgende kode praktiserer filter () -metoden for å hente to avsnitt ved å bruke ID- og klassenavn.

Ovennevnte kode velger bare de avsnittene som har klasse = ”P1”Og id =”P2“.

Produksjon

Hvordan du bruker ikke () -metoden

Not () -metoden vil føre til at returnerende elementer som ikke er innenfor samsvarskriteriene. Eller man kan si at det er det motsatte av Filter () Metode. Syntaksen til ikke () er gitt nedenfor:

$ ("Selector").ikke (kriterier, funksjon (indeks));

Eksempel

I koden ovenfor,

• To klasser “P1”Og“P2”Sendes inn i ikke () -metoden
• de Addclass (“Ikke”) brukes til å fargelegge utvalget laget av ikke() metode

Produksjon

Hvordan du bruker har () metode

Har () -metoden praktiseres for å få elementet som har grenelementer. Syntaks for denne metoden er gitt nedenfor:

$ ("Selector").har ("element");

I syntaks ovenfor, "velger”Som inneholder“element”Ville bare bli hentet.

Eksempel

For bedre forståelse av HAS () -metoden blir følgende kode utført.

Ovennevnte kode sporer at “div”-Kode som har“avsnitt”Element. I tillegg CSS -klassen = ”har”Brukes til å vise den valgte”div" stikkord.

Produksjon

Ovennevnte utgang viser at div som bare inneholder avsnitt er valgt og det div er farget med skoggrønn farge.

Konklusjon

JQuery støtter forskjellige metoder som First (), Last (), Eq (), ikke (), har (), skive () osv., For å filtrere HTML -elementer. Denne guiden gir arbeid og bruk av hver metode én etter en. Hver metode følger forskjellig filtrering for å velge noen få elementer. For eksempel bruker EQ () og skive () -metodene indeksnummer, mens andre metoder bruker klassen eller ID (av et element) for å filtrere HTML -elementer.