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