jQuery: la differenza tra i selettori 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).