jQuery / Método / .parent() - Selecionar elementos pais diretos

No jQuery, .parent() retorna um novo objeto jQuery com o pai direto de cada elemento selecionado, subindo apenas um nível. .parent(".card") inclui esse pai somente se corresponder a .card; não continua procurando mais acima. Pais compartilhados por vários elementos iniciais aparecem uma única vez.

Escolher entre parent, parents e closest

Na API de .parent(), pai é o nó imediatamente acima no modelo de objetos do documento (DOM). Uma caixa que envolve visualmente algo ou uma referência CSS não é necessariamente esse pai. Você pode encadear $(".pick").parent().addClass("picked") para alterar o resultado. A busca não move nem exclui os botões originais.

Use .parents() para todos os ancestrais correspondentes e .closest() para o cartão mais próximo mesmo com um contêiner intermediário. closest verifica também o próprio elemento: chamado em um cartão, pode retornar esse cartão. parent aceita uma string de seletor opcional, não uma função ou quantidade de níveis.

Exemplo completo com cartões aninhados

Salve todo o código em UTF-8 como parent-demo.html e abra no navegador. É preciso Internet para carregar o arquivo oficial do jQuery 4.0.0 pela rede de distribuição de conteúdo (CDN), sem instalação. A seleção inicial, o contêiner adicional, o novo cartão, a restauração e os dois exemplos do Console foram executados com 3.7.1 e 4.0.0.

Os dois botões de Alpha compartilham alpha-body como pai direto. O botão de Beta fica diretamente no cartão beta. Os contornos turquesa mostram os resultados. buttons conta os botões iniciais, parents os resultados e DOM buttons os botões que continuam no documento.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Select immediate parents</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select { font: inherit; margin: 4px; max-width: 100%; }
    #board, .card, .body { padding: 12px; border: 1px solid #aab; margin: 10px 0; }
    .picked { outline: 3px solid teal; outline-offset: -3px; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Select one parent level</h1>
  <label for="mode">Traversal:</label>
  <select id="mode">
    <option value="parent">parent()</option>
    <option value="filtered">parent('.card')</option>
    <option value="closest">closest('.card')</option>
    <option value="ancestors">parents('section')</option>
  </select>
  <button type="button" id="wrap">Wrap Beta button</button>
  <button type="button" id="add">Add Gamma</button>
  <button type="button" id="reset">Reset</button>
  <section id="board">
    <article id="alpha" class="card">
      Alpha card
      <div id="alpha-body" class="body">
        <button type="button" id="alpha-one" class="pick"><span>Alpha one</span></button>
        <button type="button" id="alpha-two" class="pick">Alpha two</button>
      </div>
    </article>
    <article id="beta" class="card">
      Beta card
      <button type="button" id="beta-one" class="pick">Beta one</button>
    </article>
  </section>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const initial = $("#board").html();
      function report() {
        const $buttons = $("#board .pick");
        let $result;
        switch ($("#mode").val()) {
          case "filtered": $result = $buttons.parent(".card"); break;
          case "closest": $result = $buttons.closest(".card"); break;
          case "ancestors": $result = $buttons.parents("section"); break;
          default: $result = $buttons.parent();
        }
        $("#board, #board *").removeClass("picked");
        $result.addClass("picked");
        const ids = $result.map(function () { return this.id; }).get();
        $("#result").text(`buttons=${$buttons.length}\nparents=${$result.length}: ${ids.join(", ") || "(none)"}\nDOM buttons=${$("#board .pick").length}`);
      }
      $("#mode").on("change", report);
      $("#wrap").on("click", function () {
        if (!$("#beta-body").length) $("#beta-one").wrap('<div id="beta-body" class="body"></div>');
        report();
      });
      $("#add").on("click", function () {
        if (!$("#gamma").length) $("#board").append('<article id="gamma" class="card">Gamma card <button type="button" id="gamma-one" class="pick">Gamma one</button></article>');
        report();
      });
      $("#reset").on("click", function () { $("#board").html(initial); $("#mode").val("parent"); report(); });
      report();
    });
  </script>
</body>
</html>

Inicialmente, três botões produzem dois pais distintos, pois o pai compartilhado aparece uma só vez.

buttons=3
parents=2: alpha-body, beta
DOM buttons=3

1. Selecione parent('.card'): somente beta corresponde. O pai direto de Alpha é .body, e a busca não continua até alpha.
2. closest('.card') encontra alpha e beta, passando pelo .body intermediário de Alpha.
3. parents('section') retorna uma vez o ancestral comum board.
4. Pressione Wrap Beta button e volte a parent(): aparecem alpha-body e beta-body. parent('.card') fica vazio. Os botões permanecem; muda apenas a relação direta.
5. Add Gamma acrescenta um botão diretamente em um novo cartão. parent('.card') retorna apenas gamma; closest('.card') retorna três cartões. Repetir as operações não cria duplicatas.
6. Reset restaura o HTML original e o modo parent(). Altere uma condição e restaure para comparar.

report() seleciona novamente os botões em cada chamada. Guardar const $parents = $(".pick").parent() não atualiza o resultado automaticamente após alterações no DOM. Repita o percurso depois de envolver ou mover nós quando precisar das relações atuais.

Duplicatas, resultados vazios e origem do evento

Depois de Reset, execute este código no Console das ferramentas do desenvolvedor. parent em uma seleção vazia retorna um objeto jQuery de comprimento zero; confira .length antes de acessar o nó. O pai de html pode ser document em vez de um elemento normal, portanto não suponha que todos os resultados tenham propriedades de elemento como tagName.

const $buttons = $("#board .pick");
console.log(`buttons=${$buttons.length}; unique parents=${$buttons.parent().length}`);
console.log(`Alpha parent(.card)=${$("#alpha-one").parent(".card").length}`);
console.log(`Alpha closest(.card)=${$("#alpha-one").closest(".card").attr("id")}`);
console.log(`card closest itself=${$("#alpha").closest(".card").attr("id")}`);
console.log(`empty parent count=${$().parent().length}`);
console.log(`html parent is document=${$("html").parent().get(0) === document}`);

buttons=3; unique parents=2
Alpha parent(.card)=0
Alpha closest(.card)=alpha
card closest itself=alpha
empty parent count=0
html parent is document=true

Ao clicar em um span dentro do botão, event.target é esse span. Em um manipulador delegado com função comum, this permite partir do botão correspondente. Execute o trecho abaixo no Console da mesma página: ele dispara o clique no span e remove apenas seu próprio manipulador pelo namespace.

$("#board").on("click.parentExample", ".pick", function (event) {
  console.log(`parent=${$(this).parent().attr("id")}; target=${event.target.tagName.toLowerCase()}`);
});
$("#alpha-one span").trigger("click");
$("#board").off(".parentExample");

parent=alpha-body; target=span

O alvo é span, mas o pai informado é alpha-body, o pai do botão. $(event.target).parent() retornaria o próprio botão. Uma arrow function não recebe aqui o botão como this; use uma função comum. Para obter o cartão, aplique .closest(".card") ao botão.

Investigar um pai inesperado

Inspecione o DOM real no painel Elements das ferramentas do desenvolvedor. Um plugin que insere um div intermediário pode deixar .parent(".card") vazio. Decida primeiro se precisa do pai direto ou do ancestral correspondente mais próximo, em vez de acrescentar cadeias arbitrárias de .parent().parent().

Um seletor inicial amplo demais pode alterar pais sem relação. Restrinja-o, por exemplo, a #board .pick e confira comprimento e identificadores do resultado antes de mudar estilos. Se não houver resultado, verifique primeiro se os elementos iniciais existem naquele momento. A função de preparação do DOM executa após a análise do HTML inicial; chamar report() novamente inclui botões acrescentados depois.