Como selecionar o primeiro DIV pai usando jQuery?

95 
var classes = $(this).attr('class').split(' '); // this gets the current element classes

var classes = $(this).parent().attr('class').split(' '); // this gets the parent classes.

O pai na situação acima é um ankor.

Se eu quisesse obter o primeiro DIV pai de $ (this), como seria o código?

var classes = $(this).div:parent().attr('class').split(' '); // just a quick try.

* Basicamente, eu quero obter as classes do primeiro pai DIV de $ (this).

THX

javascript jquery css-selectors Adão
fonte

Respostas:

161

Use .closest()para percorrer a árvore DOM até o seletor especificado.

var classes = $(this).parent().closest('div').attr('class').split(' '); // this gets the parent classes.
Shef
fonte
10
parents("div")está atravessando e retorna todos os divs pai que você deve usar .eq(0)depois disso para garantir que ele retorne apenas o que você deseja
meo
3
Lembre-se de que é melhor usar o desempenho .parents('div').eq(0)- usar aquele seletor CSS de bolsa SEGUIDO por jQuery para filtrar apenas o primeiro elemento dará a você um ligeiro aumento de desempenho - consulte a seção 'Notas adicionais' no jQuery: eq doc
Noah Whitmore
@NoahWhitmore corrigido. Usado closest()para que não retornasse todos os pais, exceto o divpai.
Shef
41

Use .closest(), que obtém o primeiro elemento ancestral que corresponde ao seletor fornecido 'div':

var classes = $(this).closest('div').attr('class').split(' ');

EDITAR:

Como @Shef observou, .closest()retornará o elemento atual se acontecer de ser um DIV também. Para levar isso em consideração, use .parent()primeiro:

var classes = $(this).parent().closest('div').attr('class').split(' ');
Tatu Ulmanen
fonte
5
.closest()corresponderá a si mesmo se $(this)for um elemento DIV.
Shef
@ Shef, essa era uma informação nova para mim, obrigado. Eu editei minha resposta para refletir isso.
Tatu Ulmanen
3
você pode simplesmente usar.parents("div").eq(0)
meo
8

Obtém o pai se for um div. Então começa a classe.

var div = $(this).parent("div");
var _class = div.attr("class");
Esben
fonte
1
@meo Foi isso que a pergunta fez.
Daniel West
3

Mantenha simples!

var classes = $(this).parent('div').attr('class');
Daniel West
fonte
0

duas das melhores opções são

$(this).parent("div:first")

$(this).parent().closest('div')

e, claro, você pode encontrar o atributo de classe por

$(this).parent("div:first").attr("class")

$(this).parent().closest('div').attr("class")
Junaid Masood
fonte