JQuery encontra o primeiro elemento pai com prefixo de classe específico

123

Eu quero obter o primeiro pai que tem um prefixo de classe específico, suponha:

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

Por exemplo, meu elemento atual é #divide quero encontrar o primeiro elemento que tenha o prefixo de classe div-a. Então, basicamente, ele selecionará:

<div class="div-a89892">

jquery jquery-selectors

— Viagem no tempo
fonte

Pare. Use várias classes, em vez de combinar informações em uma única classe. O seletor 'correspondente' é lento e esse design não é dimensionado para nenhuma modificação. <div class='a'>, em seguida, forneça regras para div.a. Não sei por que você está colocando divo nome da classe, na verdade.

— Stefan Kendall

Ainda assim, não mescle dados em prefixos de classe. Esse é um padrão terrível e é facilmente remediado com várias classes.

— Stefan Kendall

@StefanKendall: Às vezes, você lida com a porcaria de terceiros e, às vezes, oferece suporte a aplicativos herdados que não pode ser corrigido rapidamente. O mau design é um fato da vida, e essa é uma pergunta perfeitamente legítima.

— Nerdmaster 04/04

Respostas:

221

Use .closest()com um seletor:

var $div = $('#divid').closest('div[class^="div-a"]');

— Matt Ball
fonte

BTW, não faço ideia por que isso foi rebaixado. O seletor de classe-prefix é frágil, mas irá trabalhar.

— Matt Ball

Para OP: verifique se o elemento que você está procurando é um pai em algum lugar da árvore do DOM e não um irmão ou semelhante ao objeto que você está procurando (de acordo com a documentação). Não é "o mais próximo em qualquer lugar do documento", mas "o mais próximo trabalhando na árvore DOM".

— Christian P.

Não funciona para mim. Além disso, quero encontrar o primeiro elemento que tenha prefixo específico, que não precise ser um elemento div.

— Time Travel

@Time em seguida remover o divselector de elemento: $('#divid').closest('[class^="div-a"]'). Como o @Stefan comentou, você deve realmente usar várias classes.

— Matt Bola

Esse seletor leva uma quantidade absurda de ciclos (mas ainda pode ser rápido). Se você precisa oferecer suporte ao IE6, IE7 ou IE8, isso pode realmente te ferrar se o seu DOM crescer muito; O IE lança o diálogo "o script não está respondendo" quando um certo número de instruções da JS VM é executado, e NÃO após um certo período de tempo. Eu vi scripts que terminam em 0,1ms travar o Internet Explorer por esse motivo.

— Stefan Kendall

Jquery mais tarde permitiu que você encontrasse os pais com o .parents()método.

Por isso, recomendo usar:

var $div = $('#divid').parents('div[class^="div-a"]');

Isso fornece todos os nós pai que correspondem ao seletor. Para obter o primeiro pai correspondente ao seletor, use:

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

Para outras consultas de travessia do DOM, consulte a documentação sobre a travessia do DOM .

— Sunny R Gupta
fonte

A resposta não é enganosa, apenas mostra outra alternativa para .closest (), .parents () parece mais legível e é outra solução para o problema.

— Sunny R Gupta

O mais próximo é uma solução melhor do que essa, pois o mais próximo apenas encontrará a primeira correspondência, enquanto os pais encontrarão TODAS as correspondências subindo no DOM. Obviamente, é mais eficiente usar o mais próximo, embora eu concorde, não é a melhor função nomeada.

— Mog0

Engraçado o suficiente, eu acabei usando esta solução porque .parentsUtil () não estava funcionando como eu esperava.

— Mark Handy