Enfants $(this) en jQuery : comment les obtenir sans se tromper

Comment obtenir les enfants de $(this) en jQuery ? On décortique simplement

Imaginez : vous écrivez un tableau interactif sur un site. L'utilisateur clique sur une ligne, et vous devez surligner uniquement ses cellules, sans toucher aux voisines. Ou vous créez un menu déroulant — un clic sur le titre doit afficher uniquement ses sous-éléments. Dans les deux cas, la question se pose : « Comment obtenir les éléments enfants de l'élément sur lequel je viens de cliquer ? »

Cette question est un véritable hit sur Stack Overflow. Des milliers de développeurs, des débutants aux experts, cherchent la réponse. Et ce n'est pas étonnant : travailler avec $(this) et ses enfants est une base incontournable. Aujourd'hui, nous allons une fois pour toutes comprendre comment le faire correctement, élégamment et sans bugs.

Pourquoi $(this).children() n'est pas une panacée ?

La méthode la plus évidente est children(). Elle retourne uniquement les descendants directs (premier niveau d'imbrication). Cela semble logique, mais souvent les débutants en attendent une magie qui n'existe pas.

// HTML :\n// <div id="parent">\n//   <span>Descendant direct</span>\n//   <div>\n//     <span>Descendant imbriqué (ne sera pas retourné)</span>\n//   </div>\n// </div>\n\n$('#parent').click(function() {\n  // Retournera uniquement le premier <span> et le <div>\n  let directChildren = $(this).children();\n  console.log(directChildren.length); // 2\n});

Important : children() ne regarde pas à l'intérieur des blocs imbriqués. Si vous avez besoin de tous les descendants, quelle que soit leur profondeur — utilisez find().

Méthode n°1 : La classique — $(this).children()

Quand l'utiliser : lorsque vous avez besoin uniquement des éléments directement à l'intérieur du bloc actuel. Par exemple, vous avez une liste <ul> et vous voulez parcourir ses <li>.

// Exemple : clic sur un conteneur de produit\n$('.product-card').on('click', function() {\n  // Obtenir tous les éléments enfants directs de la carte\n  let kids = $(this).children();\n  \n  // Parcourir et faire quelque chose\n  kids.each(function(index) {\n    $(this).addClass('highlighted');\n  });\n});

Astuce : on peut filtrer par sélecteur directement dans l'appel :

// Uniquement les <div> à l'intérieur de l'élément actuel\nlet divsOnly = $(this).children('div');

Méthode n°2 : Recherche profonde — $(this).find()

Quand l'utiliser : lorsque la structure est imbriquée et que vous avez besoin de tous les éléments avec une certaine classe ou balise, quelle que soit la profondeur. Par exemple, trouver toutes les images à l'intérieur d'un article.

// Clic sur un bloc d'actualité\n$('.news-block').on('click', function() {\n  // Trouver toutes les <img> à l'intérieur, même dans les sous-titres\n  let images = $(this).find('img');\n  \n  images.each(function() {\n    // Ajouter une bordure à chaque image\n    $(this).css('border', '2px solid red');\n  });\n});

Différence avec children() : find() parcourt tout l'arbre DOM à l'intérieur de l'élément. children() — uniquement le premier niveau. Retenez la règle : « Les enfants sont les enfants. Find, ce sont tous les descendants jusqu'à la septième génération ».

Méthode n°3 : JavaScript natif — sans jQuery

Et si vous écrivez en JS pur ou voulez réduire la dépendance aux bibliothèques ? $(this) a un équivalent « natif » — this dans le gestionnaire d'événement. Et lui aussi a des enfants !

// JavaScript pur\ndocument.querySelectorAll('.item').forEach(item => {\n  item.addEventListener('click', function() {\n    // Obtenir les enfants directs\n    let children = this.children; // HTMLCollection\n    \n    // Transformer en tableau pour plus de commodité\n    Array.from(children).forEach(child => {\n      child.style.backgroundColor = 'yellow';\n    });\n    \n    // Ou chercher tous les descendants par sélecteur\n    let allSpans = this.querySelectorAll('span');\n  });\n});