2011-01-12 8 views
9

Si necesito seleccionar el padre 10-th, ¿hay una manera más limpia, y luego repito .parent() ¿10 veces?Manera más limpia de escribir element.parent(). Parent(). Parent(). Parent(). Parent()

$('#element_id').parent().parent().parent().parent().parent().parent().parent().parent().parent().parent(); 
+8

$ ('# element_id'). greatgreatgreatgreatgreatgreatgreatgreatgrandparent()? –

+0

@Larry: Muy agradable. ¿Cómo lo ignoró jQuery para su API? ; o) – user113716

Respuesta

5

Si realmente se necesita para obtener el 10 de matriz, y no es capaz de utilizar un selector para llegar allí, el camino más suave probablemente sería algo como esto:

$('#element_id').parents().eq(9); 
15

Si hay un selector que representa el objetivo que está buscando, a continuación, utilizar .closest() o .parents().

$('#element_id').closest('.someClass'); 
$('#element_id').parents('.someClass:first'); 

... pero ambos devolverán la primera coincidencia encontrada. La solución adecuada dependerá de su marcado HTML real.

(Tenga en cuenta que .closest() también evalúa el elemento original, mientras que parents() comienza con el primer antepasado.)

También hay que tener en cuenta que los navegadores hacen correcciones HTML. Por lo tanto, si está atravesando desde <table> que no tiene <tbody> a un elemento externo al <table>, hacer x número de .parent() puede dar resultados diferentes en diferentes navegadores.

+6

Esta es la manera de hacerlo. parent() diez veces requiere demasiado conocimiento de la estructura DOM, que podría cambiar. Aplicar una clase al nodo que estás buscando es mucho más seguro. –

+0

Gracias, esto es realmente genial, pero no responde la pregunta tal como es. ¿Qué sucede si este padre décimo no tiene una clase o identificación? –

+0

@Silver Light: Seguiría usando '.parents()' con un selector. Dale un selector que diga * "dame el 10 ° partido" *. De esta manera: '$ ('# element_id'). Parents (': eq (9)')'. – user113716

6

El siguiente post here utiliza esta implementación:

jQuery.fn.getParent = function(num) { 
    var last = this[0]; 
    for (var i = 0; i < num; i++) { 
     if(!last) break; 
     last = last.parentNode; 
    } 
    return jQuery(last); 
}; 
// usage: 
$('#myElement').getParent(3); 

por lo que su uso sería simplemente:

$('#element_id').getParent(10); 
+1

Esto causará errores si un elemento tiene menos que los antepasados ​​'num'. – lonesomeday

+0

Debe romper el ciclo si no hay 'parentNode' en la iteración anterior. 'if (! last) break; last = last.parentNode; '(como @lonesomeday indicado arriba) – user113716

+0

@lonesomeday, Buen punto. Solo pensé que podría ser útil para OP u otros. –

0

He utilizado este código:

var position = $("#test").parents("div").length - 10; 
$("#test").closest("div:eq(" + position + ")").append("here!!!"); 

con que HTML :

<div> 
     <div> 
      <div> 
       <div> 
        <div> 
         <div> 
          <div> 
           <div> 
            <div> 
             <div> 
              <div> 
               <span id="test">here</span> 
              </div> 
             </div>  
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Sí que es 11 div. así que ejecutar el código debería detenerse en el décimo div y anexar aquí !!!

Estoy seguro de que este código podría ser aún más limpio.

No hay necesidad de agregar clases.

Edit: He utilizado 11 DIV para que pueda ver que no va a la primera, en realidad se detiene en la décima.