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
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 su u bratsko-sestrinskom odnosu (engl. siblings) ako imaju zajedničkog roditelja
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 bi dao 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 dijete jer se nalazi dvije razine ispod elementa <div id="roditelj">.
U ovom primjeru koristimo selektor djeteta (korištenjem znaka '>' između identifikatora #roditelji i oznake elementa odlomka):
$('#roditelj > p')
Selektor potomaka pronalazi sve elemente koji su potomci zadanog elementa roditelja. 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 bi dao 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.
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 bi dao 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 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 bi dao 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.
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 identifikatora id="#prvi" i oznake elementa odlomka):
$('#prvi ~ p')