I metodi andSelf() e addBack() di jQuery

Il metodo andSelf di jQuery seleziona l'elemento corrente oltre agli altri selezionati.

.andself()

Dalla versione jQuery 3.0 il metodo andBack() è stato rimosso e sostituito con il metodo .addBack che raggiunge lo stesso risultato selezionando l'elemento precedente.

.addBack()

Ad esempio, in questo script seleziono gli elementi che hanno la classe .blu usando 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; }
.prova { 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><u>C</u></p>
</div>
<p><b>D</b></p>
<script>
$( "#clickme" ).click(function() {
$(".blu").siblings().addBack().addClass("prova");
});
</script>
</body>
</html>

Quando l'utente clicca sul box clickme lo script individua i fratelli dell'elemento corrente.

In questo caso l'elemento corrente è il tag <p class=blu>...</p>

Il selettore $(".blu").sibilings() seleziona i "fratelli" dell'elemento corrente ossia i tag che contengono le lettere A e C ma non l'elemento corrente.

La presenza del metodo .addBack() nel selettore mi permette di aggiungere alla selezione anche l'elemento corrente/precedente, il tag che contiene la lettera B.

Il comando si conclude con il metodo .addClass("prova") che associa la classe .prova a tutti gli elementi selezionati colorando il loro testo in rosso.

Pertanto, il comando colora di rosso le lettere A, C (fratelli) e B (elemento corrente).

il risultato in output

Non colora di rosso la lettera D perché, pur trovandosi in un tag <p>, non si trova all'interno del <div> che contiene l'elemento corrente. Quindi, non è un elemento fratello (sibillings) di <p class=blu>.

E così via.