Hvordan få Alle Anchors Relatert til div id i JQuery

Side utviklere trenger for å få en samling av elementer som finnes i et annet element på en webside. Vurdere en DIV element som inneholder en produktbeskrivelse. Det DIV kan også inneholde flere ankerkoder eller koblinger, som peker til andre sider som diskuterer produktet. Bruke JQuery Javascript-bibliotek, kan du ta alle de ankere inne som DIV og manipulere dem. Alt du trenger å bruke denne programmering biblioteket er en link til filen som inneholder jQuery kode og ID av DIV som inneholder ankere.

Bruksanvisning

1 Start en HTML-editor eller Notisblokk og åpne noen HTML-dokument.

2 Legg til denne linjen (uten anførselstegn) til dokumentets hodedelen: "<script> Besøk hvite hus </a>

<a href="http://www.nasa.gov"> Besøk NASA </a>

</ Div>

<Input type = "button" value = "Test" onclick = "return test ( 'div1')" />

Denne DIV inneholder to ankerkoder. Knappen, når den klikkes, kaller en Javascript-funksjon som heter "test" og pasninger som fungerer DIV id.

3 Plasser Javascript-koden nedenfor inn i dokumentet manus seksjon:

funksjonstest (divId) {

Var ankere = getAnchors (Divid);

for (var i = 0; i <anchors.length; i ++) {

alert ( "Anchor text =" + anker [i] .innerText);

}

}

funksjons getAnchors (Divid) {

Var ankere = $ ( "#" + Divid + "> a");

tilbake ankere;

}

Den "test" funksjon kaller en funksjon som heter "getAnchors" og går som funksjon gjennom DIV id. Den "getAnchors" funksjonen henter alle ankrene fra DIV og returnerer dem til "test" funksjon. Den "test" funksjonen lagrer ankere i "anker" variable. Merk at "getAnchors" funksjonen har en JQuery uttalelse. Denne uttalelsen legger til "#" til begynnelsen av DIV id. I dette eksempel, blir det "# div1» fordi DIV id er "div1". Den "> en" del av uttalelsen representerer "barn" elementer innen den overordnede DIV element. Siden du bare vil anker barn i DIV bruker koden bokstaven "a" for å fortelle JQuery å finne alle underordnede elementer innen DIV som anker elementer.

4 Lagre dokumentet og vise den i nettleseren din. De to lenker og knappen vises. Klikk på knappen. Knappen klikkhendelsen kaller "test" funksjon. At funksjonen kaller "getAnchors" -funksjonen. Den "getAnchors" -funksjonen får alle anker i DIV og returnerer dem til "test" funksjon. At funksjonen viser deretter tekstverdiene for hvert av ankrene.

Hint

• Du kan gjøre flere nyttige ting med ankere etter henting dem fra en DIV. Gjenta for anker samling bruker vanlig Javascript eller JQuery "hver" funksjon. For eksempel, mens looping gjennom ankere, kan du endre utseendet eller bare undersøke sine tekstverdier som vist på disse trinnene. JQuery nettsted har nyttig informasjon om "hver" funksjon som hjelper utviklere manipulere samlinger av web sideelementer.