jQuery Succinctly Traversing With jQuery

Forskjellen mellom finn () og filter () Metoder

De filter() Metoden brukes til å filtrere det nåværende settet av elementer som finnes i pakningssettet. Dens bruk bør overlates til oppgaver som krever filtrering av et sett med elementer som allerede er valgt. For eksempel vil koden nedenfor filtrere de tre

elementer som finnes i pakningssettet.

    

først

midten

siste

Merknader: Når du bruker filter(), Spør alltid deg selv om det er helt nødvendig. For eksempel, ( ': Ikke (: først): ikke (: siste)'). $ ( 'P') filter kan skrives uten filter()$ ( 'P: ikke (: først): ikke (: siste)').

De finne() Metoden kan derimot brukes til å finne etterkommere av de valgte elementene. Tenker på finne() mer som å oppdatere eller endre dagens innpakket sett med nye elementer som er innkapslet i elementene som allerede er valgt. For eksempel vil koden under endre det pakkede settet fra

elementer til to elementer ved å bruke finne().

    

først

midten

siste

Merknader: Du kan faktisk kombinere elementene i wrappen før du bruker finne() metode med de nåværende elementene ved å bruke andSelf () - f.eks. $ ( 'P'). Finne ( 'sterk') andSelf. ().

Begrepet å ta bort er det filter() vil bare redusere (eller filtrere) de valgte elementene i innpakningssettet mens finne() kan faktisk lage et helt nytt sett med innpakket elementer.

Merknader: Både finne() og filter() er destruktive metoder som kan utelukkes ved bruk slutt(), som vil returnere det innpakket settet tilbake til sin tidligere tilstand før finne() eller filter() ble brukt.


Passing filter () en funksjon i stedet for en uttrykk

Før du går av og oppretter et egendefinert filter for å velge elementer, kan det være mer fornuftig å bare passere krysset filter() Metode en funksjon som lar deg undersøke hvert element i wrapper-settet for et bestemt scenario.

For eksempel, la oss si at du ønsker å pakke inn alt elementer i en HTML-side med en

element som for øyeblikket ikke er innpakket med dette elementet.

Du kan opprette et egendefinert filter for å utføre denne oppgaven, eller du kan bruke filter() metode ved å sende den en funksjon som bestemmer om elementets foreldre er a

element, og hvis ikke, fjern elementet fra settet før du pakker inn elementer som er igjen i settet med a

element.

I det følgende eksemplet velger jeg hver element i HTML-siden, og så passerer jeg filter() Metode en funksjon som brukes til å iterere over hvert element (ved bruk av dette) i innpakningssettet, kontroller for å se om elementets foreldreelement er a

element.

      

Legg merke til at jeg bruker ! operatør for å endre en boolsk verdi fra ekte til falsk. Dette er fordi jeg vil fjerne elementer fra settet som har

elementer som deres overordnede element. Funksjonen passerte til filter() Metoden vil bare fjerne elementer fra settet hvis funksjonen returnerer feil.

Hovedpunktet er at hvis du arbeider med en isolert situasjon, oppretter du et egendefinert filter, f.eks. : findImgWithNoP-for en enkelt situasjon kan unngås ved å bare sende filtermetoden en funksjon som kan gjøre tilpasset filtrering. Dette konseptet er ganske kraftig. Vurder hva som er mulig når vi bruker en vanlig uttrykkstest i forbindelse med filter() metode.

    
  • jQuery er flott.
  • Det er lett.
  • Det er gratis!
  • jQuery gjør alt enkelt.

Traverserer opp DOM

Du kan enkelt krysse opp DOM til forfedreelementer ved hjelp av ordnede (), foreldre(), og nærmeste () metoder. Å forstå forskjellene mellom disse metodene er kritisk. Undersøk koden under og sørg for at du forstår forskjellene mellom disse jQuery-traverseringsmetodene.

    

Merknader: nærmeste () og foreldre() ser ut til å ha samme funksjonalitet, men nærmeste () vil faktisk inkludere det valgte elementet i filtreringen.
nærmeste ()slutter å krysse når den finner en kamp, ​​mens foreldre() får alle foreldre og deretter filtre på valgfri velger. Derfor, nærmeste () kan bare returnere maksimalt ett element.


Traverseringsmetoder Godta CSS-uttrykk som valgfrie argumenter

CSS-uttrykk overføres ikke bare til jQuery-funksjonen for å velge elementer, men de kan også sendes til flere av de kryssende metodene. Det kan være lett å glemme dette fordi mange av de kryssende metodene fungerer uten å måtte bruke noe uttrykk i det hele tatt. neste (). Uttrykket er valgfritt for følgende traversalmetoder, men husk at du har mulighet til å gi uttrykk for filtrering.

  • barn ( 'uttrykket')
  • neste ( 'uttrykket')
  • nextAll ( 'uttrykket')
  • ordnede ( 'uttrykket')
  • foreldre ( 'uttrykket')
  • prev ( 'uttrykket')
  • prevAll ( 'uttrykket')
  • søsken ( 'uttrykket')
  • nærmeste ( 'uttrykket')