Hvordan endre HTML-elementer med jQuery

March 24  by Eliza

WThere er noen måter å endre allerede eksisterende HTML-elementer med jQuery, avhengig av hva du ønsker å endre. For eksempel si at du ønsket å endre teksten av elementene i siden som du bare jobbet på.

I stedet for at hvert element si "her er," du vil den skal si "Sak." Du kan legge til en ID til hvert element og deretter endre HTML med html () eller teksten () -funksjonen. Men det virker som mye arbeid. Og det skaper et annet problem hvis HTML endrer et sted på veien.

En annen måte er å sløyfe gjennom hver av listeelementene og endre dem. jQuery har sin egen måte å sløyfe, kalt hver (). Den hver () sløyfe metoden har en fordel over mens og etter looper: The hver () -funksjonen kan brukes med jQuery, slik at du får full nytte av alle de jQuery funksjoner og du kan kjede på hver () -funksjonen med andre jQuery funksjoner .

Kjeding er betegnelsen som brukes med jQuery for å beskrive hva du gjør når du kobler funksjoner med prikker for å gjøre funksjonen gjelder for kjeden.

Med bare to elementer å endre, vil du sannsynligvis bare gjøre dette i HTML selv, men dette eksempelet viser prosessen og funksjoner for å endre HTML, slik at du kan bruke den når du virkelig trenger det.

Denne oppføringen viser HTML og Javascript for dette eksemplet.

<! DOCTYPE html>
<Html>
<Head>
<Title> jQuery </ title>
<Script type = "text / javascript"
src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js">
</ Script>
</ Head>
<Body>
<H1> Legge HTML </ h1>
<Ul id = "thelist">
<Li> Her er en </ li>
<Li> Her er 2 </ li>
</ Ul>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ("# Thelist") føyer ("<li> Her er tre </ li>.");
$ ("# Thelist li"). Hver (function () {
. Div existingText = $ (denne) .text () substr (7,1);
$ (Denne) .text ("Item" + existingText);
});
});
</ Script>
</ Body>
</ Html>

Javascript og jQuery her viser et par nye ting, så se litt nærmere på koden.

Den første linjen i den nye koden er dette:

$ ("# Thelist li"). Hver (function () {

At linjen bruker en velger å finne alle <li> elementer innen ID av thelist. Som er litt annerledes enn de andre velgere du se og representerer hvordan jQuery kan bruke sidens hierarkiet for å få tilgang bare de elementene som du vil.

Den hver () -funksjonen er endret på velgeren og setter opp en anonym funksjon. På dette punktet, vet du at koden vil begynne looping gjennom hver <li> element innenfor IDen thelist.

Neste linje med kode ser slik ut:

. Div existingText = $ (denne) .text () substr (7,1);

Denne koden setter opp en vanlig Java variabel, existingText, og setter det på linje med resultatet av $ (denne) .text (). Substr (7,1). Men hva er dette, eller mer riktig, $ (denne)? De spesielle velger $ (dette) viser til gjeldende element som jobbet på. Java har en tilsvarende kalte dette, men du vil at jQuery-versjonen, slik at du pakker det inn i dollartegnet / parenteser notasjon.

The $ (denne) velger er lenket til jQuery tekst () -funksjonen, som henter elementer tekst, uten HTML markup, bare teksten. Teksten () -funksjonen blir deretter lenket til substr () -funksjonen. Den substr () -funksjonen griper en delstreng, eller del av en streng, og returnerer den.

I dette tilfellet ønsker du substr () for å gå tilbake til deg en enkelt tegn begynner på den sjuende posisjon. Du kan gjøre dette fordi du vet at hvert element begynner med ordet her er etterfulgt av et mellomrom, som dette:

Her er en

Telle tegn fra venstre, er det seks tegn i Her er pluss ett tegn for plassen. Det gjør syv, slik at du ender opp med substr (7,1). Riktignok bryter dette når du kommer til ti elementer fordi du bare returnere et enkelt tegn.

Du kan fancy dette opp ved å bruke et vanlig uttrykk, som du ikke har virkelig brukt tid på ennå, så for dette eksempelet, la det som er. Ok, hvis du må vite, kan du erstatte substr () -funksjonen med kampen () -funksjonen, og det ville se slik ut:

. Div existingText = $ (denne) .text () kamp (/ [d] /);

Tilbake til virkeligheten og eksempelet, ser den endelige linje med kode som dette:

$ (Denne) .text ("Item" + existingText);

Den linjen rett og slett kaller teksten () -funksjonen, men i stedet for å returnere tekst, denne gangen du setter den til "Item" + existingText. Fordi du har nummeret på elementet i den variable existingText, er det som om du føye det.

En side vises i en nettleser ser ut som denne.

Hvordan endre HTML-elementer med jQuery