parent-metodi jQueryssä

Olemme jo hieman käsitelleet parent -metodia, kun keskustelimme parent -pseudoluokasta. Muistutan, että parent -metodi ja parent -valitsin tekevät eri asioita; ensimmäinen löytää elementin vanhemman, kun taas toinen kaikki ei-tyhjät elementit (jotka ovat vanhempia).

Seuraavassa esimerkissä löydämme elementin #test, etsimme sitten sen vanhemman parent -metodilla ja asetamme sille tekstin '!'. Oletetaan, että meillä on seuraava HTML-koodi:

<p>outside</p>
<div>
	<p>inside</p>
	<p>inside</p>
	<p id="test">inside</p>
	<p>inside</p>
	<p>inside</p>
</div>
<p>outside</p>

Ja nyt kirjoitamme parent -metodin Javascript-koodiin:

$('#test').parent().html('!');

Älä unohda, että tälle metodille voi antaa valitsimen lisäsuodatusta varten vanhempien joukosta.

Etsi luokkaa www olevan elementin vanhempi ja väritä se punaiseksi.

Etsi kaikkien b -tagien vanhemmat ja muuta niiden väri punaiseksi.

Etsi kaikkien b -tagien vanhemmat, ja väritä ne, joilla on luokka test, punaiseksi.