Il metodo siblings di jQuery
Il metodo siblings di jQuery seleziona i fratelli dell'elemento corrente, ossia gli elementi dello stesso tipo.
.siblings()
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; }
.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().addClass("prova");
});
</script>
</body>
</html>
Quando l'utente clicca sul box clickme lo script cerca i fratelli dell'elemento con la classe .blu e gli assegna la classe .rosso che li colora di rosso.
In questo caso l'elemento corrente è il tag <p class=blu><i>B</i></p>
<div>
<p><b>A</b></p>
<p class=blu><i>B</i></p>
<p><u>C</u></p>
</div>
<p><b>D</b></p>
Il metodo $(".blu").siblings() trova i fratelli dell'elemento corrente che in questo caso sono due
<div>
<p><b>A</b></p>
<p class=blu><i>B</i></p>
<p><u>C</u></p>
</div>
<p><b>D</b></p>
A questi associa la classe .rosso tramite il metodo .addClass("rosso").
Il metodo siblings() non seleziona l'elemento <p><b>D</b></p> perché, pur essendo un tag <p>, non si trova all'interno del <div> che contiene l'elemento corrente
<div>
<p><b>A</b></p>
<p class=blu><i>B</i></p>
<p><u>C</u></p>
</div>
<p><b>D</b></p>
Nota. Il metodo siblings() seleziona solo i fratelli di un elemento corrente all'interno dello stesso contenitore. Non seleziona i tag al di fuori del contenitore. Inoltre, non seleziona nemmeno l'elemento corrente. Nell'esempio che ho appena fatto l'elemento corrente resta di colore blu mentre i tag fratelli sono colorati di rosso.
E così via.
