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">
Viagem no tempo
fonte
6
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
2
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
17
@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
3
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
56

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
9
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
1
Engraçado o suficiente, eu acabei usando esta solução porque .parentsUtil () não estava funcionando como eu esperava.
Mark Handy