I metodi di attraversamento del DOM di jQuery

jQuery dispone di diversi metodi per l'attraversamento del DOM. Attraversare il DOM significa muoversi lungo l'albero del documento e selezionare elementi. Vediamo in dettaglio i metodi più importanti.

prev() e next()

Come suggerisce il loro nome, questi due metodi selezionano rispettivamente l'elemento immediatamente precedente e immediatamente successivo ad un dato elemento.

Per esempio, data la seguente struttura:

<div id="test">
	<p id="one">...</p>
	<p id="two">...</p>
	<p id="three">...</p>
</div>

ecco come possiamo usare questi due metodi:

var element = $('#two', '#test');
var first = element.prev(); // #one
var last = element.next(); // #three

Questi metodi accettano come parametro un selettore con cui è possibile selezionare un elemento specifico:

var element = $('#three', '#test');
var first = element.prev('#one'); // #one

prevAll() e nextAll()

Questi due metodi hanno un funzionamento identico a quelli visti in precedenza, con la differenza che invece di restituire un solo elemento restituiscono un nuovo set di elementi.

Esempio:

var element = $('#three', '#test');
var firstSecond = element.prevAll(); // #one, #two

prevUntil() e nextUntil()

Anche questi due metodi restituiscono un nuovo set di elementi, ma la selezione arriva fino (e non oltre) il selettore specificato come parametro (da cui il termine until, fino a).

Per esempio, data la seguente struttura:

<div id="test">
	<p id="one">...</p>
	<p></p>
	<p></p>
	<p></p>
	<p id="two">...</p>
</div>

possiamo operare questa selezione:

var element = $('#one', '#test');
var nextPs = element.nextUntil('#two');  // #one, p, p, p

var element2 = $('#two', '#test');
var prevPs = element2.prevUntil('#one');  // #two, p, p, p

parent() e parents()

Questi due metodi selezionano rispettivamente l'immediato genitore di un elemento e l'antenato di tale elemento. Per antenato si intende un elemento genitore che non contiene direttamente l'elemento selezionato ma che è invece un capostipite della struttura nella quale tale elemento risiede.

Esempio di una tale struttura è il seguente:

<div id="ancestor">
	<div id="parent">
		<div id="child"></div>
	</div>
</div>

Ecco come usare questi metodi:

var child = $('#child');
var parent = child.parent(); // #parent
var ancestor = child.parents('#ancestor'); // #ancestor

siblings()

Questo metodo restituisce tutti gli elementi fratelli di un dato elemento. Un elemento è fratello di un altro quando entrambi hanno lo stesso genitore. Il metodo accetta come parametro un selettore per restituire solo un determinato tipo di elementi e non tutti.

Esempio:

var element = $('#one', '#test');
var siblings = element.siblings(); // #one, p, p, p
var siblingsFiltered = element.siblings('p:not([id])); // p, p, p

children()

Questo metodo restituisce tutti gli elementi figli di un dato elemento. Il metodo accetta come parametro un selettore per restituire solo un determinato tipo di elementi e non tutti.

Esempio:

var element = $('#test');
var pS = element.children('p:not([id])'); // p, p, p