Il metodo find() di jQuery
Il metodo .find() seleziona tutti i discendenti di un elemento, sia quelli diretti (children) e sia quelli indiretti.
.find()
Ad esempio, in questo script assegno a una variabile il selettore myVar=$("div") dei tag <div> presenti nel DOM
<!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; }
.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>
<br>
<div><b>A</b></div>
<div><p><b>B</b></p></div>
<div><b>C</b></div>
<br><b>D</b>
<script>
$( "#clickme" ).click(function() {
myVar=$("div");
myVar.find("b").addClass("prova");
});
</script>
</body>
</html>
Quando l'utente clicca sull'id=clickme, il selettore myVar.find("b").addClass("prova") cerca i tag <b> discendenti all'interno dei <div>
Quando li trova gli applica la classe prova.
A sua volta la classe .prova colora di rosso il testo contenuto nei tag <p>.
Il metodo find() seleziona tutti i tag <div> della pagina.
Poi cerca all'interno della selezione i tag <b> tra tutti i discendenti.
Seleziona sia i discendenti diretti (children) come <b>A</b> e <b>C</b> che i discendenti indiretti come <p><b>B</b></p>
<div><b>A</b></div>
<div><p><b>B</b></p></div>
<div><b>C</b></div>
<br><b>D</b>
Il tag <p><b>B</b></p> è un discendente indiretto dell'elemento <div> perché si trova a sua volta dentro il tag <p>. Quindi, non è a diretto contatto con il tag <div> pur essendo al suo interno. In ogni caso il metodo find() lo seleziona.
Il metodo find() invece non seleziona la lettera D perché, pur essendo un tag <b>D</b>, non è un discendente dell'elemento <div> né diretto, né indiretto.
Nota. Il metodo find() cerca in tutti i discendenti diretti e indiretti di un elemento. Quindi richiede un maggiore tempo di esecuzione rispetto al metodo children() che invece seleziona soltanto i discendenti diretti (figli) di un elemento.
E così via.
