jQuery / Método / .children() - Selecionar filhos diretos

No jQuery, .children() retorna um novo objeto jQuery contendo apenas os elementos filhos imediatos da seleção. Um seletor como .children(".hot") mantém somente os filhos correspondentes. Diferencie .find() para descendentes mais profundos e .contents() para nós filhos diretos, incluindo texto e comentários.

Descer um nível e filtrar candidatos

A documentação de .children() limita o percurso a um nível abaixo de cada elemento inicial. Sem argumento, retorna todos os filhos imediatos do tipo elemento, independentemente da tag. Não inclui automaticamente o elemento inicial nem os netos dentro dos filhos.

O argumento filtra os candidatos diretos encontrados. .children(".hot") não continua descendo até encontrar a classe. Com vários pais iniciais, reúne os filhos diretos de cada um; delimite a seleção inicial para trabalhar com um cartão específico.

Executar o exemplo completo de cartão aninhado

Salve todo o código em UTF-8 como children-demo.html e abra no navegador. Não é necessário instalar nada, mas é preciso internet para carregar o arquivo oficial do jQuery pela rede de distribuição de conteúdo, ou CDN. O código usa 4.0.0. Seleção, filtro, inclusão, restauração e comparação foram executados com 3.7.1 e 4.0.0.

card tem três elementos diretos: p com ID title, div com ID body e button com ID action. nested está dentro de body e é neto de card. Intro text e um comentário diferenciam outros nós. A classe hot do próprio card não o inclui na seleção de seus filhos.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direct children and deeper descendants</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    #card { border: 2px solid #aaa; padding: 16px; max-width: 600px; }
    #card > * { display: block; padding: 8px; margin: 8px 0; border: 1px solid #ddd; }
    #card .marked { outline: 3px solid #ba6900; background: #fff5d6; }
    button { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Direct children and deeper descendants</h1>
  <div id="card" class="hot">
    Intro text
    <!-- A comment is not an element. -->
    <p id="title" class="hot">Direct paragraph</p>
    <div id="body"><p id="nested" class="hot">Nested paragraph</p></div>
    <button type="button" id="action">Direct button</button>
  </div>
  <button type="button" id="all">All direct children</button>
  <button type="button" id="hot">Direct .hot children</button>
  <button type="button" id="deep">All .hot descendants</button>
  <button type="button" id="add">Add direct .hot paragraph</button>
  <button type="button" id="reset">Reset</button>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      function show($chosen) {
        $("#card").find("*").removeClass("marked");
        $chosen.addClass("marked");
        const ids = $chosen.map((_, item) => item.id).get().join(", ");
        $("#result").text(`${ids || "none"} | ${$chosen.length}`);
      }
      function direct() {
        show($("#card").children());
      }
      $("#all").on("click", direct);
      $("#hot").on("click", () => show($("#card").children(".hot")));
      $("#deep").on("click", () => show($("#card").find(".hot")));
      $("#add").on("click", function () {
        if (!$("#extra").length) {
          $("<p>").attr("id", "extra").addClass("hot").text("Added paragraph").appendTo("#card");
        }
        direct();
      });
      $("#reset").on("click", function () {
        $("#extra").remove();
        direct();
      });
      direct();
    });
  </script>
</body>
</html>

Inicialmente, os três filhos imediatos recebem contornos. O fundo de body também aparece atrás de seu conteúdo, mas o elemento selecionado é body; nested não foi selecionado separadamente.

title, body, action | 3

1. All direct children mostra title, body, action | 3.
2. Direct .hot children mantém os filhos diretos correspondentes: title | 1.
3. All .hot descendants desce com .find(): title, nested | 2. O próprio card continua excluído.
4. Add direct .hot paragraph inclui um p em card e consulta os filhos diretos novamente: title, body, action, extra | 4. Verificar extra impede duplicatas.
5. Após incluir, Direct .hot children retorna title, extra | 2. Reset remove apenas extra e restaura a seleção dos três filhos originais.

show remove marked dos descendentes anteriores antes de marcar o conjunto novo. Alternar entre seleção direta e profunda não deixa destaques antigos. Reset não substitui o conteúdo nem o botão originais.

Comparar .find() e .contents()

Após Reset, execute este trecho no console de desenvolvimento. Cada linha imprime os IDs selecionados.

const ids = $set => $set.map((_, item) => item.id).get().join(", ");
console.log(ids($("#card").children()));
console.log(ids($("#card").children(".hot")));
console.log(ids($("#card").find(".hot")));

title, body, action
title
title, nested

.find() percorre vários níveis de descendentes; .children() desce uma vez. Para exatamente dois níveis, use $("#card").children().children(".hot"). Aqui retorna somente nested, mas acrescentar um contêiner intermediário altera o resultado.

.contents() obtém nós diretos, incluindo texto e comentários. Nós são as unidades do modelo de objetos do documento, DOM, e abrangem elementos, texto e comentários. Operações de classe e estilo de elementos não se aplicam igualmente aos outros nós; não trate todos como elementos.

Verificar resultados vazios, momento e estrutura

Sem elemento inicial ou sem filhos do tipo elemento, o resultado é vazio. action contém apenas texto: .children() fica vazio, mas o texto não desapareceu. Examine contêineres intermediários como div ou ul e se a classe pertence ao pai, filho ou neto.

Seleções não são atualizadas automaticamente. Um conjunto salvo de três filhos mantém seu comprimento depois da inclusão de outro p. Consulte novamente, como direct, para obter os filhos atuais. Se não responder, verifique jQuery em Network e erros em Console; selecione conteúdo assíncrono após concluir a inserção.