Niños $(this) en jQuery: cómo obtenerlos y no confundirse

¿Cómo obtener los hijos de $(this) en jQuery? Lo explicamos fácilmente

Imagine: está escribiendo una tabla interactiva en un sitio web. El usuario hace clic en una fila y usted necesita resaltar exactamente sus celdas, sin tocar las vecinas. O está haciendo un menú desplegable: un clic en el título debe mostrar solo sus subelementos. En ambos casos surge la pregunta: «¿Cómo obtener los elementos hijos del elemento en el que acabo de hacer clic?»

Esta pregunta es un verdadero éxito en Stack Overflow. Miles de desarrolladores, desde principiantes hasta profesionales, buscan la respuesta. Y no es de extrañar: trabajar con $(this) y sus hijos es una base indispensable. Hoy vamos a entender de una vez por todas cómo hacerlo correctamente, de forma elegante y sin errores.

¿Por qué $(this).children() no es una panacea?

La forma más obvia es el método children(). Devuelve solo los descendientes directos (primer nivel de anidamiento). Suena lógico, pero a menudo los principiantes esperan de él una magia que no tiene.

// HTML:\n// <div id="parent">\n//   <span>Descendiente directo</span>\n//   <div>\n//     <span>Descendiente anidado (no se devolverá)</span>\n//   </div>\n// </div>\n\n$('#parent').click(function() {\n  // Devolverá solo el primer <span> y <div>\n  let directChildren = $(this).children();\n  console.log(directChildren.length); // 2\n});

Importante: children() no mira dentro de los bloques anidados. Si necesita todos los descendientes de cualquier profundidad, use find().

Método n.º 1: El clásico — $(this).children()

Cuándo usarlo: cuando solo necesita los elementos directamente dentro del bloque actual. Por ejemplo, tiene una lista <ul> y quiere recorrer sus <li>.

// Ejemplo: clic en el contenedor de un producto\n$('.product-card').on('click', function() {\n  // Obtenemos todos los elementos hijos directos de la tarjeta\n  let kids = $(this).children();\n  \n  // Los recorremos y hacemos algo\n  kids.each(function(index) {\n    $(this).addClass('highlighted');\n  });\n});

Truco: se puede filtrar por selector directamente en la llamada:

// Solo <div> dentro del elemento actual\nlet divsOnly = $(this).children('div');

Método n.º 2: Búsqueda profunda — $(this).find()

Cuándo usarlo: cuando la estructura está anidada y necesita todos los elementos con una clase o etiqueta específica, independientemente de la profundidad. Por ejemplo, encontrar todas las imágenes dentro de un artículo.

// Clic en el bloque de noticias\n$('.news-block').on('click', function() {\n  // Encontramos todos los <img> dentro, incluso si están en subtítulos\n  let images = $(this).find('img');\n  \n  images.each(function() {\n    // Añadimos un borde a cada imagen\n    $(this).css('border', '2px solid red');\n  });\n});

Diferencia con children(): find() recorre todo el árbol DOM dentro del elemento. children() solo el primer nivel. Recuerde la regla: «Los hijos son los hijos. Find son todos los descendientes hasta la séptima generación».

Método n.º 3: JavaScript nativo — sin jQuery

¿Y si está escribiendo en JS puro o quiere reducir la dependencia de bibliotecas? $(this) tiene un equivalente «nativo»: this en el manejador de eventos. ¡Y también tiene hijos!

// JavaScript puro\ndocument.querySelectorAll('.item').forEach(item => {\n  item.addEventListener('click', function() {\n    // Obtenemos los hijos directos\n    let children = this.children; // HTMLCollection\n    \n    // Lo convertimos en array para mayor comodidad\n    Array.from(children).forEach(child => {\n      child.style.backgroundColor = 'yellow';\n    });\n    \n    // O buscamos todos los descendientes por selector\n    let allSpans = this.querySelectorAll('span');\n  });\n});