jQuery: differenza tra parent() e parents()

jQuery dispone di molti selettori per operare sul DOM. Il funzionamento di alcuni di questi selettori, tuttavia, non è molto chiaro agli sviluppatori per via della sintassi che li caratterizza. Tipico è il caso dei selettori parent() e parents(). In questo articolo vorrei enfatizzare le differenze esistenti tra questi due selettori.

parent()

Questo selettore seleziona l'immediato genitore di un elemento e dovrebbe essere usato quando la struttura del DOM presenta un solo genitore, come in questo caso:

<div id="parent">
	<p id="child">Test</p>
</div>

Quindi possiamo scrivere:

var parent = $('#child').parent();

o in modo più specifico:

var parent = $('#child').parent('#parent');

Ma se la struttura fosse stata:

<div id="grandparent">
	<div id="parent">
		<p id="child">Test</p>
	</div>
</div>

e avessimo scritto:

var grandParent = $('#child').parent('#grandparent');

non avremmo ottenuto l'effetto sperato, perchè in questo caso la struttura del DOM presenta due genitori (o antenati) e quindi va usato il selettore parents().

parents()

Questo selettore seleziona uno dei genitori dell'elemento specificato e può essere usato quando la struttura del DOM si presenta con più genitori (o antenati), come in questo caso:

<div id="grandparent">
	<div id="parent">
		<p id="child">Test</p>
	</div>
</div>

Quindi possiamo scrivere:

var grandParent = $('#child').parents('#grandparent');

Per funzionare correttamente, questo selettore ha bisogno sempre che voi specifichiate l'espressione CSS precisa con cui selezionare l'antenato (in questo caso è #grandparent).