Il metodo parentsUntil di jQuery
Seleziona i predecessori dell'elemento corrente scendendo in tutti i livelli del DOM fino a un elemento (escluso) indicato tra parentesi tonde.
.parentsUntil()
L'elemento o gli elementi indicati tra parentesi tonde devo inserirli tra virgolette se parandoli con una virgola.
Ecco alcuni esempi pratici
.parentsUntil("body")
.parentsUntil("head, body")
Si distingue dal metodo parents() che, invece, seleziona tutti gli elementi predecessori nel DOM.
Ad esempio, in questo script il selettore $(".blu") cerca l'elemento a cui è 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").parentsUntil("body").addClass("rosso");
});
</script>
</body>
</html>
Dopo aver cliccato sul box clickme, il selettore $(".blu") trova l'elemento a cui è associata la classe .blu
Poi il metodo .parentsUntil() seleziona gli elementi predecessori nel DOM fino al tag "body" escluso.
<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>
Nota. Il metodo parentsUntil() non seleziona l'elemento corrente (C) ma soltanto gli altri elementi predecessori. Per inserire nella selezione anche l'elemento corrente devo aggiungere un ulteriore metodo add() o addBack().
La classe .rosso colora di rosso il contenuto di tutti gli altri elementi antenati nel DOM
E così via.
