Il metodo add() di jQuery
Il metodo add() di jQuery mi permette di aggiungere altri elementi a una selezione.
Ad esempio, in questo script seleziono gli elementi che hanno 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; }
.verde { color:green; }
.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><b>B</b></p>
<p class=verde><b>C</b></p>
</div>
<p class=verde><b>D</b></p>
<script>
$( "#clickme" ).click(function() {
$(".blu").add(".verde").addClass("rosso");
});
</script>
</body>
</html>
Poi aggiungo alla selezione la classe .verde tramite il metodo add(".verde")
Quando l'utente clicca sul box clickme, lo script associa la classe .rosso alla selezione tramite il metodo addClass("rosso").
Il selettore $(".blu").add(".verde") seleziona gli elementi a cui è associata la classe .blu oppure la classe .verde e li colora di rosso.
In questo caso il selettore seleziona i paragrafi in cui sono presenti le lettere B, C, D
<div>
<p><b>A</b></p>
<p class=blu><b>B</b></p>
<p class=verde><b>C</b></p>
</div>
<p class=verde><b>D</b></p>
E così via.
