Verifique se algum ancestral tem uma classe usando jQuery

156

Existe alguma maneira no jQuery de verificar se algum pai, avô ou bisavô tem uma classe.

Eu tenho uma estrutura de marcação que me deixou fazendo esse tipo de coisa no código:

$(elem).parent().parent().parent().parent().hasClass('left')

No entanto, para facilitar a leitura do código, eu gostaria de evitar esse tipo de coisa. Existe alguma maneira de dizer "qualquer pai / avó / bisavô tem essa classe"?

Estou usando o jQuery 1.7.2.

— crmpicco
fonte

stackoverflow.com/questions/16863917/… - caso alguém queira fazê-lo sem o jQuery

— Robert Niestroj

Respostas:

304

if ($elem.parents('.left').length) {

}

— Alex
fonte

Obrigado, exatamente o que eu precisava! Para o registro, enquanto a prática de tratar .lengthcomo um valor truthy é bastante prolífica em JS, é muito mais clara e fácil de entender.length > 0

— dooleyo

Aqui está o link para jQuery .parents () documentação

— H Dog

Existem várias maneiras de filtrar antepassados de elementos.

if ($elem.closest('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents().hasClass('parentClass')) {/*...*/}
if ($('.parentClass').has($elem).length /* > 0*/) {/*...*/}
if ($elem.is('.parentClass *')) {/*...*/}

Cuidado , o closest() método inclui o próprio elemento enquanto verifica o seletor.

Como alternativa, se você tiver um seletor exclusivo que corresponda a $elem, por exemplo #myElem, você pode usar:

if ($('.parentClass:has(#myElem)').length /* > 0*/) {/*...*/}
if(document.querySelector('.parentClass #myElem')) {/*...*/}

Se você deseja combinar um elemento que depende de qualquer classe ancestral apenas para fins de estilo, use uma regra CSS :

.parentClass #myElem { /* CSS property set */ }

— A. Wolff
fonte

Atrevo-me a dizer (sem testar isso) que esse método é melhor. Elem.parents percorrerá toda a estrutura principal do pai, onde o mais próximo () deve (provavelmente) parar quando encontrar o pai mais próximo com esse elemento e, portanto, é mais eficiente. Este é um palpite sem instrução. Eu costumo usar o mais próximo (). Parece que eu encontrei um novo tópico para pesquisar no meu blog! : P

— dudewad

@dudewad sim, é, mas é bastante recente. Quero dizer, na versão jq mais antiga, AFAIK, esse não era o caso. O loop pais não foi interrompido no primeiro pai correspondente usando o método closest (), mas agora é. (não sei desde que versão jq, mas eu tenho certeza que para ser correto sobre essa afirmação)

— A. Wolff

É bom saber, obrigado pela informação. Estranho que eles não tivessem construído a invasão desde a primeira versão.

— Dudewad

quando não há pais que podem ser encontrados, pais () é mais rápido do que mais próximo () jsperf.com/closest-vs-parents-foobar

— Alex

@ Alex Muito interessante, thx para a entrada! BTW, re-ler a pergunta, Is there any way in jQuery to check if any parent,..., closest()cheque próprio elemento de modo que este não é realmente responder a pergunta, OP poderia desejar para excluir explecitely o elemento em si, por isso ya, a resposta era usar.parents()

— A. Wolff

Você pode usar o parentsmétodo com o .classseletor especificado e verificar se algum deles corresponde a ele:

if ($elem.parents('.left').length != 0) {
    //someone has this class
}

— Igor Dymov
fonte