Hvordan finne Barna av et element i jQuery
HTML-elementer inkluderer noen del av en webside, for eksempel overskrifter, tabeller, bilder og avsnitt. Når du reir HTML-tagger på innsiden av hverandre, skaper du forelder og barn elementer. Den øverste element er morselskap mens alle nestede elementer blir barna. I jQuery, kan du få barna til et element ved hjelp av "barn ()" funksjon, men du må sløyfe gjennom rekke verdier som funksjon skaper.
Bruksanvisning
1 Sjekk at koden inneholder en referanse til jQuery biblioteket før du prøver å skript i jQuery. Legg denne koden på innsiden av "<head>" koder på websiden hvis du ikke ser referanse:
<Script element. Tilføy velgeren med "barn ()" funksjonen for å få barn:
$ ( 'Ul.level-2') (barn).;
Eksempelet over vil velge noen sorterte liste som er gitt en klasse navnet "nivå-2." Men når "barn ()" finner flere underordnede elementer, vil det skape en matrise med verdier. Du trenger spesiell kode for å behandle en matrise.
4 Tilføy "barn ()" med "hver ()" for å bla gjennom rekke underordnede elementer. Siden dette er en looping struktur, trenger du en teller variabel, men du trenger ikke å lage det på forhånd i jQuery. Pass "i" som et argument i "hver ()" for å få disken:
$ ( 'Ul.level-2'). (Barn). Hver (funksjon (i) {
});
5 Deklarere en variabel som vil holde teksten verdien av hvert barn element. Du kan få andre verdier fra elementene, men teksten vil returnere noen tekst funnet inne barn og er nyttig for å gripe data. Sett variabelen til "$ (denne)" for å få det aktuelle elementet at "hver ()" -funksjonen fungerer på. Tilføy «$ (denne)" med "text ()" for å få teksten:
Var childEl = $ (this) .text ();
6 Utgang verdiene til siden din ved å velge et element og tilføye "føyer ()" slik at "hver ()" -funksjonen kan fortsette å legge verdiene som den finner dem:
. $ ( 'Div') legge til (i + ":" + childEl + "");
I dette eksempelet "childEl" er utgang til et sett med "<div>" koder. Hver gang jQuery gjentar koden innsiden "hver ()" det utganger nummeret fra "i", legger et par av semikolon, sender verdien av "childEl" og slutter linjen med delestrek tag.
7 Din siste skriptet vil se slik ut:
$ (Funksjon () {
$ ( 'Ul.level-2'). (Barn). Hver (funksjon (i) {
var childEl = $(this).html();
. $ ( 'Div') legge til (i + ":" + childEl + "");
});
});
Hint
- Legg til "console.log (childEl);" inne i "hver ()" -funksjonen på den aller siste linjen. Bruk Firebug i Firefox eller Javascript-konsoll i Google Chrome for å sjekke verdiene i en konsoll under feilsøking.
- Erstatt "tekst ()" med "html ()" for å få HTML-koden for de underordnede elementer.