jQuery - Prelazak (Traversing)

Što je prelazak (Traversing)?

jQuery selektori koje smo do sada vidjeli omogućavaju nam samo odabir elemenata niz DOM stablo. Postoje brojne prilike kada trebate odabrati nadređeni element ili element pretka. Tu nastupaju jQuery-jeve DOM metode prelaska. Ovim metodama prelaza možemo vrlo lako ići gore, dolje i oko DOM stabla. DOM prelazak je jedna od istaknutih odlika jQuery-ja. Da biste to maksimalno iskoristili, morate razumjeti odnose između elemenata u DOM stablu. 

<body>
    <div class="container">
        <h1>IT TUTORIJALI</h1>
        <p>Volim učiti <em>jQuery</em> uz IT TUTORIJALE.</p>
        <ul>
            <li>Prva stavka</li>
            <li>Druga stavka</li>
        </ul>
    </div>
</body>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Jednostavno DOM stablo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI</h1>
        <p>Volim učiti <em>jQuery</em> uz IT TUTORIJALE.</p>
        <ul>
            <li>Prva stavka</li>
            <li>Druga stavka</li>
        </ul>
    </div>
</body>
</html>

HTML kod u gornjem primjeru može biti predstavljen sljedećim DOM stablom:



Gornji dijagram prikazuje odnose roditelja i djeteta između elemenata:

  • Element <body> roditelj je elementa <div> i predak svega unutar njega. Element <div> nadređen je elementima <h1>, <p> i <ul> i podređen je elementu <body>.
  • Elementi <h1>, <p> i <ul> su braća i sestre, jer dijele istog roditelja.
  • Element <h1> podređen je elementu <div> i potomak je elementa <body>. Ovaj element nema djece.
  • Element <p> roditelj je <em> elementa, a podređen elementu <div> i potomak elementa <body>. Sadržani <em> element podređen je elementu <p> i potomak je elementa <div> i <body>.
  • Slično tome, element <ul> je roditelj elemenata <li>, podređen elementu <div> i potomak elementa <body>. Elementi koji sadrže <li> podređeni su elementu <ul> i potomak su elementa <div> i <body>. Takođe su oba elementa <li> braća i sestre.

Prelazak DOM stablom

Sad kad ste shvatili logičke odnose između elemenata u DOM stablu, vrijeme je da naučite kako izvoditi razne operacije prelaženja, poput prelaska DOM stabla prema gore, dolje i bočno pomoću jQueryja. U sljedećim lekcijama ćete naučiti kako odabrati gornje elemente u DOM stablu.