Como encontrar um pai com uma classe conhecida no jQuery?

242

Eu tenho um <div>que tem muitos outros <div>s, cada um em um nível de aninhamento diferente. Em vez de dar a cada criança <div>um identificador, prefiro apenas dar à raiz <div>o identificador. Aqui está um exemplo:

<div class="a" id="a5">
  <div class="b">
    <div class="c">
      <a class="d">
      </a>
    </div>
  </div>
</div>

Se eu escrever uma função no jQuery para responder à classe de desejar encontrar o ID para seu pai, classe a, como eu faria isso?

Não posso simplesmente fazer $('.a').attr('id');, porque existem várias classes a. Eu poderia encontrar o ID do pai, mas isso parece ter um design ruim, lento e não muito polimórfico (eu teria que escrever um código diferente para encontrar o ID da classe c).

— John Smith
fonte

488

Supondo que thisseja .d, você pode escrever

$(this).closest('.a');

O closestmétodo retorna o pai mais interno do seu elemento que corresponde ao seletor.

— SLaks
fonte

47

Observe que há pouco problema: se o elemento inicial corresponder à consulta também, você não obtém o elemento pai, mas o mesmo elemento. Esse pode ou não ser o comportamento desejado. Caso contrário, recomendo: $ (this) .parent (). Closest ('. A');

— Risord

1

Muito útil. Eu sempre uso para fazer $ (this) .parent (). Parent (). Parent () e eu sabia que havia uma solução melhor.

— Wang'l Pakhrin

28

Passe um seletor para a função dos pais do jQuery :

d.parents('.a').attr('id')

EDIT Hmm, na verdade a resposta de Slaks é superior se você quiser apenas o ancestral mais próximo que corresponda ao seu seletor.

— Drew Noakes
fonte

8

Você pode usar os pais () para obter todos os pais com o seletor fornecido.

Descrição: obtenha os ancestrais de cada elemento no conjunto atual de elementos correspondentes, opcionalmente filtrados por um seletor.

Mas parent () obterá apenas o primeiro pai do elemento.

Descrição: obtenha o pai de cada elemento no conjunto atual de elementos correspondentes, opcionalmente filtrado por um seletor.

pai jQuery () vs. pais ()

E há .parentsUntil () que eu acho que será o melhor.

Descrição: obtenha os ancestrais de cada elemento no conjunto atual de elementos correspondentes, até mas sem incluir o elemento correspondente pelo seletor.

— Amr Elgarhy
fonte

Ele só quer um pai solteiro , então deve ligar closest.

— SLaks

2

Use .parentsUntil ()

$(".d").parentsUntil(".a");

— jai3232
fonte

Isso segmentaria todos os elementos pai até atingir o elemento pai correspondente.

— Dustin Halstead

0

Extraído dos comentários de @ Resord acima. Este funcionou para mim e mais próximo da questão.

$(this).parent().closest('.a');

obrigado

— Anjana Silva
fonte