Prečkanje (Traversing)

Jquery traversing pomeni "pomikanje skozi", in se uporablja za iskanje ali izbiro elementov na podlagi njihove povezave z drugimi elementi. Lahko začnemo z izborom enega elementa, in se pomikamo po izboru, dokler ne dosežemo želenih elementov. Spodnja slika prikazuje spletno stran kot drevo, kjer vidimo, da se z jQuery enostavno pomikamo navzgor med predniki (ancestors), navzdol med potomci (descendants) ali vstran med sorodniki (siblings). To gibanje se imenuje prečkanje, ali pomikanje skozi.

Prečkanje (Traversing)
    Razlaga slike:
  1. element <div> je nadrejeni (parent) element <ol> in prednik (ancestor) vsega v njem
  2. element <ol> je nadrejeni (parent) element obeh <li> in podrejen (child) elementu <div>
  3. levi <li> element je nadrejeni (parent) element, elementu <span>, podrejeni (child) elementu <ol> in potomec (descendant) elementu <div>
  4. element <span> je podrejeni (child) element levega <li> elementa, in potomec (descendant) elementov <ol> in <div>
  5. elementa <li> sta brat in sestra (siblings)
  6. desni element <li> je nadrejeni (parent) element, elementu <b>, podrejeni (child) element <ol> in potomec (descendant) elementa <div>
  7. element <b> je podrejen (child) element desnega <li> elementa, in potomec (descendant) elementov <ol> in <div>

Predniki (Ancestors)

Z jQuery lahko prečkamo drevo DOM navzgor in poiščemo prednike (ancestors) elementa. Prednik je starš (parent), stari starš (grandparent), praded (great-grandparent) in tako naprej. Uporabne metode za prehod po drevesu DOM so:

metoda opis
parent() vrne neposredni nadrejeni element
parents() vrne vse elemente prednikov izbranega elementa
parentsUntil() vrne vse elemente prednikov med dvema danima argumentom

parent()

Metoda parent() (starš) vrne neposredni nadrejeni element izbranega elementa, in prečka samo eno raven navzgor po drevesu DOM. Primer, ki si ga bomo ogledali vrne neposredni nadrejeni element vsakega elementa.

parents()

Metoda parents() (starši) vrne vse elemente prednikov izbranega elementa, vse do korenskega elementa HTML dokumenta. V primeru lahko kliknemo na posamezen element span, če želimo poiskati vse nadrejene elemente div za vsak span element.

parentsUntil()

Metoda parentsUntil() vrne vse elemente prednikov med dvema danima argumentoma. Predniki <li class="q"> in vse do <ul class="l1">, imajo svetlo modro barvo ozadja. Predniki <li class="2">, ki imajo razred x do <ul class="l1">, pa imajo črno obrobo.

Potomci (Descendants)

Če se z jQuery-jem pomikamo navzdol po drevesu DOM, lahko poiščemo potomce elementa, ki je lahko otrok (child), vnuk (grandchild), pravnuk (great-grandchild) itn. Za prehod po drevesu DOM lahko uporabimo metodi, kot sta:

metoda opis
children() vrne vse neposredne podrejene elemente
find vrne elemente potomcev izbranega elementa

children()

Metoda children() vrne vse neposredne podrejene elemente izbranega elementa. Metoda prečka samo eno raven navzdol po drevesu DOM.

find()

Metoda find() vrne elemente potomcev izbranega elementa, vse do zadnjega. V primeru si bomo ogledali, kako vrne vse elemente span, ki so potomci elementa div.