Filhos $(this) em jQuery: como obter e não se confundir

Como obter os filhos de $(this) em jQuery? Explicando de forma simples

Imagine: você está escrevendo uma tabela interativa em um site. O usuário clica em uma linha e você precisa destacar apenas as células dela, sem tocar nas vizinhas. Ou você está fazendo um menu suspenso — um clique no título deve mostrar apenas seus subitens. Em ambos os casos, surge a pergunta: “Como obter os elementos filhos do elemento em que acabei de clicar?”

Essa pergunta é um verdadeiro sucesso no Stack Overflow. Milhares de desenvolvedores, de iniciantes a profissionais, buscam a resposta. E não é surpresa: trabalhar com $(this) e seus filhos é o básico, sem o qual não se pode viver. Hoje vamos entender de uma vez por todas como fazer isso de forma correta, elegante e sem bugs.

Por que $(this).children() não é uma panaceia?

A maneira mais óbvia é o método children(). Ele retorna apenas os descendentes diretos (primeiro nível de aninhamento). Parece lógico, mas muitas vezes os iniciantes esperam dele uma mágica que não existe.

// HTML:\n// <div id="parent">\n//   <span>Descendente direto</span>\n//   <div>\n//     <span>Descendente aninhado (não será retornado)</span>\n//   </div>\n// </div>\n\n$('#parent').click(function() {\n  // Retornará apenas o primeiro <span> e o <div>\n  let directChildren = $(this).children();\n  console.log(directChildren.length); // 2\n});

Importante: children() não olha dentro de blocos aninhados. Se você precisar de todos os descendentes de qualquer profundidade — use find().

Método nº1: Clássico — $(this).children()

Quando usar: quando você precisa apenas dos elementos diretamente dentro do bloco atual. Por exemplo, você tem uma lista <ul> e quer percorrer seus <li>.

// Exemplo: clique no contêiner do produto\n$('.product-card').on('click', function() {\n  // Obtém todos os elementos filhos diretos do cartão\n  let kids = $(this).children();\n  \n  // Percorre e faz algo\n  kids.each(function(index) {\n    $(this).addClass('highlighted');\n  });\n});

Dica: você pode filtrar por seletor diretamente na chamada:

// Apenas <div> dentro do elemento atual\nlet divsOnly = $(this).children('div');

Método nº2: Busca profunda — $(this).find()

Quando usar: quando a estrutura é aninhada e você precisa de todos os elementos com uma determinada classe ou tag, independentemente da profundidade. Por exemplo, encontrar todas as imagens dentro de um artigo.

// Clique no bloco de notícias\n$('.news-block').on('click', function() {\n  // Encontra todos os <img> dentro, mesmo que estejam em subtítulos\n  let images = $(this).find('img');\n  \n  images.each(function() {\n    // Adiciona uma borda a cada imagem\n    $(this).css('border', '2px solid red');\n  });\n});

Diferença do children(): find() percorre toda a árvore DOM dentro do elemento. children() — apenas o primeiro nível. Lembre-se da regra: “Filhos são filhos. Find são todos os descendentes até a sétima geração”.

Método nº3: JavaScript nativo — sem jQuery

E se você estiver escrevendo em JS puro ou quiser reduzir a dependência de bibliotecas? $(this) tem um análogo “nativo” — this no manipulador de eventos. E ele também tem filhos!

// JavaScript puro\ndocument.querySelectorAll('.item').forEach(item => {\n  item.addEventListener('click', function() {\n    // Obtém os filhos diretos\n    let children = this.children; // HTMLCollection\n    \n    // Converte para array para facilitar\n    Array.from(children).forEach(child => {\n      child.style.backgroundColor = 'yellow';\n    });\n    \n    // Ou busca todos os descendentes por seletor\n    let allSpans = this.querySelectorAll('span');\n  });\n});