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

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