JQuery encuentra el primer elemento padre con el prefijo de clase específico

123

Quiero obtener el primer padre que tiene un prefijo de clase específico, supongamos:

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

Por ejemplo, mi elemento actual es #dividy quiero encontrar el primer elemento que tenga el prefijo de clase div-a. Entonces básicamente seleccionará:

<div class="div-a89892">
jquery jquery-selectors Viaje en el tiempo
fuente
66
Detener. Use varias clases, en lugar de combinar información en una sola clase. El selector de "coincidencia" es lento, y este diseño no escala para ninguna modificación. <div class='a'>, luego proporcione reglas para div.a. No sé por qué estás poniendo divel nombre de la clase, en realidad.
Stefan Kendall
2
Aún así, no combine datos en prefijos de clase. Este es un patrón terrible, y se soluciona fácilmente con múltiples clases.
Stefan Kendall
17
@StefanKendall: a veces estás lidiando con la basura de terceros, y a veces estás apoyando aplicaciones heredadas que no puedes solucionar rápidamente. El mal diseño es un hecho de la vida, y esta es una pregunta perfectamente legítima.
Nerdmaster

Respuestas:

221

Usar .closest()con un selector:

var $div = $('#divid').closest('div[class^="div-a"]');
Matt Ball
fuente
Por cierto, no tengo idea de por qué esto fue rechazado. El selector de clase-prefijo es frágil, pero va a trabajar.
Matt Ball
Para OP: asegúrese de que el elemento que está buscando es un padre en algún lugar del árbol DOM y no un hermano o similar al objeto que está buscando (según la documentación). No es "el más cercano en ninguna parte del documento", sino el "más cercano trabajando en el árbol DOM".
Christian P.
No funciona para mi Además, quiero encontrar el primer elemento que tiene un prefijo específico, que no tiene que ser un elemento div.
Viaje en el tiempo
@Time continuación, quitar el divselector de elementos: $('#divid').closest('[class^="div-a"]'). Sin embargo, como comentó @Stefan, realmente deberías estar usando varias clases.
Matt Ball
3
Este selector toma una cantidad absurda de ciclos (pero aún puede ser rápido). Si necesita admitir IE6, IE7 o IE8, esto realmente puede fastidiarlo si su DOM crece demasiado; IE arroja el cuadro de diálogo "el script no responde" cuando se ejecuta un cierto número de instrucciones JS VM, y NO después de un cierto período de tiempo. He visto scripts que se completan en 0.1ms crash internet explorer por esta misma razón.
Stefan Kendall
56

Jquery luego te permitió encontrar a los padres con el .parents()método.

Por lo tanto, recomiendo usar: 

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

Esto proporciona todos los nodos principales que coinciden con el selector. Para obtener el primer padre que coincida con el selector, use:

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

Para otras consultas transversales de DOM, consulte la documentación sobre cómo atravesar el DOM .

Sunny R Gupta
fuente
La respuesta no es engañosa, solo muestra otra alternativa a .closest (), .parents () parece más legible y es otra solución al problema.
Sunny R Gupta
9
Más cercano es una mejor solución que esta, ya que lo más cercano será encontrar la primera coincidencia, mientras que los padres encontrarán TODAS las coincidencias subiendo el DOM. Obviamente, es más eficiente usar el más cercano, aunque estoy de acuerdo, no es la función mejor nombrada.
Mog0
1
Curiosamente, terminé usando esta solución ya que .parentsUtil () no funcionaba como esperaba.
Mark Handy