Il metodo not() di jquery
Il metodo not() di jQuery mi permette di escludere degli elementi dalla selezione.
.not()
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().not("html, body").addClass("rosso");
});
</script>
</body>
</html>
Quando clicco sul box clickme, il selettore $(".blu") trova l'elemento a cui ho associato la classe .blu
Poi il metodo .parents() seleziona tutti gli elementi antenati dell'elemento corrente. Quindi, tutti gli altri livelli più bassi nel DOM.
<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>
Successivamente il metodo not("html, body") toglie dalla selezione gli elementi del tag <html> e <body>
Pertanto la selezione si riduce al paragrafo B e D
<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. L'elemento corrente C non viene selezionato perché il metodo parents() non lo include. Per aggiungere anche questo dovrei usare un ulteriore metodo addBack()
A questi elementi viene associata la classe .rosso tramite la funzione .addClass("rosso") che li colora di rosso
E così via.
