Il metodo parents di jQuery

Il metodo parents() di jQuery seleziona gli elementi "antenati" rispetto all'elemento corrente scendendo in tutti i livelli del DOM.

.parents()

Si distingue dal metodo parent() senza s che, invece, seleziona solo gli elementi antenati entro un livello nel DOM.

Ad esempio, in questo script il selettore $(".blu") cerca l'elemento a cui ho associato la classe .blu

<!DOCTYPE html>
<html>
<head>
<style>
#box { width:100px; height:100px; text-align:center; background:#f00; font-size:14px; }
#clickme { width:100px; border:1px solid #000; }
.blu { color:blue; }
.rosso { color:red; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="clickme">Click here</div>
<p><b>A</b></p>
<div>
<p><b>B</b></p>
<p class=blu><b>C</b></p>
<p><b>D</b></p>
</div>
<p><b>E</b></p>
<script>
$( "#clickme" ).click(function() {
$(".blu").parents().addClass("rosso");
});
</script>
</body>
</html>

Quando clicco sul box clickme, il selettore $(".blu") individua l'elemento a cui è associata la classe .blu

Poi il metodo .parents() seleziona gli altri elementi antenati dell'elemento corrente. Quindi, tutti gli altri livelli più bassi nel DOM.

In questo caso, jQuery seleziona tutto il resto del documento ad eccezione dell'elemento corrente.

Nota. Il metodo parents() non seleziona l'elemento corrente (C) ma soltanto gli altri elementi "antenati". Per inserire nella selezione anche l'elemento corrente devo concatenare un ulteriore metodo add() o addBack(). Per selezionare solo gli elementi parenti entro un livello nel DOM, invece, devo usare il metodo parent() senza la s finale.

La classe .rosso colora di rosso il contenuto di tutti gli altri elementi antenati nel DOM

output dello script

Il metodo parents() è molto dispersivo.

Per questa ragione è utile abbinarlo al metodo filter() in modo da filtrare i risultati selezionati.

Ad esempio, questo selettore individua solo gli elementi antenati (parents) dell'elemento corrente che si trovano dentro un tag <div>

$(".blu").parents().filter("div").addClass("rosso");

In questo modo jQuery seleziona soltanto i paragrafi B e D perché si trovano dentro il tag <div>

I paragrafi A ed E non sono selezionati perché non si trovano in un tag <div>.

E così via.