jQuery omogućava pronalaženje elemenata koristeći njihove odnose (roditelj, dijete, potomci, predci, bratsko-sestrinski odnosi) u DOM modelu.
CDN pohrana slika i videa.
Pretvorba formata slika: webp...
Vrhunsko AI povećanje slika!
25Gb podataka.
Zašto ne sada?
Selektori poretka su selektori koji koriste elemente DOM modela, a mogu biti u međusobnim odnosima kao roditelj, djeca, u bratsko-sestrinskim odnosima, potomci ili preci.
Element A je roditelj (engl. parent) elementu B ako je element B sadržan unutar elementa A i nalazi se točno jednu razinu iznad njega
Element <html> je element roditelj elemenata <head> i <body>
Elementi djeca (engl. childs) su svi elementi sadržani između početne i završne elementa, a imaju zajedničkog roditelja (nalaze se točno jednu razinu ispod njega).
Elementi djeca elementa <html> su elementi <head> i <body>
Elementi su u bratsko-sestrinskom odnosu (engl. siblings) ako imaju zajedničkog roditelja
Elementi <head> i <body> su u bratsko-sestrinskom odnosu jer imaju zajedničkog roditelja <html>.
Slijedeći html kôd koristimo kao primjer za selektore poretka:
<body>
<div id="roditelj">
<p id="prvi">Prvi odlomak</p>
<p>Drugi odlomak</p>
<p>Treći odlomak</p>
<div id="dijete">
<p>Četvrti odlomak</p>
</div>
</div>
</body>Selektor djeteta pronalazi sve elemente koji su elementi djeca zadanog elementa roditelja. Drugim riječima elementi djeca su svi elementi koji imaju isti element roditelj.
Umetnimo slijedeći kôd u navedeni html primjer:
<script type="text/javascript">
$(function()
{
$('#roditelj > p').css('color', 'blue');
});
</script>Gornji primjer u web pregledniku daje slijedeći ispis:
Prvi odlomak Drugi odlomak Treći odlomak Četvrti odlomak
Djeca elementa <div id="roditelj"> su prvi, drugi i treći odlomak, dok četvrti odlomak nije dijete jer se nalazi dvije razine ispod html elementa <div id="roditelj">.
U ovom primjeru koristimo selektor djeteta (uporabom znaka > između identifikatora #roditelji i oznake elementa odlomka):
$('#roditelj > p')Selektor potomaka pronalazi sve elemente koji su potomci zadanog elementa pretka. Drugim riječima potomci su svi elementi koji slijede iza početne oznake elementa pretka, a prije završne oznake elementa pretka.
Umetnimo slijedeći kôd u navedeni html primjer:
<script type="text/javascript">
$(function()
{
$('#roditelj p').css('color', 'blue');
});
</script>Gornji primjer u web pregledniku daje slijedeći izgled:
Prvi odlomak Drugi odlomak Treći odlomak Četvrti odlomak
Elementi odlomci koji su potomci elementa <div id="roditelj"> su prvi, drugi, treći i četvrti odlomak, jer se svi nalaze između početne i završne oznake elementa <div id="roditelj">.
U ovom primjeru koristimo selektor potomka (neposrednim navođenjem oznake elementa odlomka iza identifikatora id="roditelj"):
$('#roditelj p')Selektor slijedećeg susjeda pronalazi samo one elemente koji se nalaze neposredno iza zadanog elementa unutar bratsko-sestrinskih odnosa (dakle html elemenata koji imaju istog roditelja).
Umetnimo slijedeću skriptu u navedeni html kôd:
<script type="text/javascript">
$(function()
{
$('#prvi + p').css('color', 'blue');
});
</script>Gornji primjer u web pregledniku daje slijedeći izgled:
Prvi odlomak Drugi odlomak Treći odlomak Četvrti odlomak
U ovom primjeru koristimo selektor susjeda (korištenjem znaka + između identifikatora #prvi i oznake elementa odlomka):
$('#prvi + p')Selektor slijedećih bratsko-sestrinskih elemenata pronalazi sve html elemente koji se nalaze iza zadanog elementa, a unutar bratsko-sestrinskih odnosa.
Umetnimo slijedeću skriptu u navedeni html kôd:
<script type="text/javascript">
$(function()
{
$('#prvi ~ p').css('color', 'blue');
});
</script>Gornji primjer u web pregledniku daje slijedeći izgled:
Prvi odlomak Drugi odlomak Treći odlomak Četvrti odlomak
Djeca elementa <div id="roditelj"> su prvi, drugi i treći odlomak, dok četvrti odlomak nije jer se nalazi dvije razine ispod elementa <div id="roditelj">. Prema tome prvi, drugi i treći odlomak su u bratsko-sestrinskim odnosima, a četvrti odlomak nije (jer nije dijete html elementa div.
Odlomci koji se nalaze iza identifikatora #prvi u bratsko-sestrinskim odnosima, su drugi i treći odlomak.
U ovom primjeru koristimo selektor slijedećih bratsko-sestrinskih elemenata (korištenjem znaka tilda ~ između elementa s id="prvi" i oznake elementa odlomka):
$('#prvi ~ p')