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

Respostas:

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