La fonction .find() de jQuery joue exactement le même rôle que le sélecteur (fonction $), sauf que find ne recherche que dans les enfants de l'élément HTML auquel il est chaîné.

<div id="header">
	<h1>Grand titre de la page</h1>
</div>

<div id="content">
	<h1>Titre du paragraphe</h1>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	<ul>
	   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	   <li>Aliquam tincidunt mauris eu risus.</li>
	   <li>Vestibulum auctor dapibus neque.</li>
	</ul>
</div>

Le code ci-dessous permet de recherche uniquement dans le div contenu :

$('#content').find('h1');

Différence entre find et children

.children() ne recherche que dans les enfants directs de l'élément, alors que .find() porte sur toute la descendance : les enfants des enfants des enfants... avec un niveau illimité d'imbrication.

Voici un billet similaire qui vous permettera d'en savoir plus sur ajouter un commentaire sur une cellule excel.

Find ou context ?

La fonction find fait exactement la même chose que l'ajout d'un contexte dans un sélecteur jQuery, d'ailleurs le code qui exécute find est le même que celui qui est appelé lors de l'utilisation d'un contexte.

Quand on utilise un contexte, jQuery "traduit" la demande en utilisant find, donc théoriquement .find() est légèrement plus rapide en terme de performance, car on évite cette petite étape de prétraitement.

Mais en pratique les résultats varient parfois (en fonction du navigateur), je vous invite à tester par vous même sur votre ordinateur grâce à cette page de benchmark : http://jsperf.com/jquery-find-vs-context-sel.

Fini de lire cette page ? allez faire un tour ici : miel en rayon, ça peut vous intéresser.