Il metodo prevAll() di jquery
Il metodo prevAll() di jQuery seleziona tutti gli elementi prima dell'elemento corrente all'interno dello stesso livello.
.prevAll()
Ad esempio, in questo script il selettore $(".blu") individua l'elemento del DOM a cui è assegnata 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><b>C</b></p>
<p class=blu><i>D</i></p>
<b>E</b>
</div>
<script>
$( "#clickme" ).click(function() {
$(".blu").prevAll().addClass("rosso");
});
</script>
</body>
</html>
Quando clicco sul box clickme, lo script individua e seleziona l'elemento con la classe .blu
Poi il metodo .prevAll() seleziona gli elementi prima dell'elemento corrente all'interno dello stesso livello e gli associa la classe .rosso che li colora di rosso.
In questo caso l'elemento corrente è <p class=blu><i>D</i></p>
<p><b>A</b></p>
<div>
<p><b>B</b></p>
<p><b>C</b></p>
<p class=blu><i>D</i></p>
<b>E</b>
</div>
Il metodo prevAll() di jQuery seleziona gli elementi <p><b>B</b></p> e <b>C</b> all'interno del livello corrente <div>
Non seleziona l'elemento corrente (D), né gli elementi precedenti che si trovano al di fuori del livello corrente (A).
Nota. Per includere nella selezione anche l'elemento corrente (D) dovrei aggiungere il metodo addBack(). Per includere anche gli altri elementi al di fuori del livello corrente, invece, il metodo add().
E così via.
