jQuery selektori poretka : Hierarchy Selectors

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.

DOM model : Document Object Model

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

Web dizajn za tebe

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 : Child Selector

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 : Descendant Selector

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 susjeda : Next Adjacent Selector

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')

Slijedeća braća-sestre : Next Siblings Selector

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')

jQueryvodič

jQuery selektori poretka : Hierarchy Selectors

DOM model : Document Object Model

Web dizajn za tebe

Selektor djeteta : Child Selector

Selektor potomaka : Descendant Selector

Selektor susjeda : Next Adjacent Selector

Slijedeća braća-sestre : Next Siblings Selector

jQuery
vodič