jQuery: selección de abuelos

Question

¿Existe alguna forma mejor de seleccionar elementos abuelos en jQuery para evitar esto?

$(this).parent().parent().parent().parent().parent().children(".title, .meta").fadeIn("fast"); 

Thanks.

Answer 1

Usted puede utilizar el método parents() que coincide con los padres en contra de un selector de

http://api.jquery.com/parents/

O si usted está utilizando 1.4 hay un nuevo método parentsUntil()

http://api.jquery.com/parentsUntil/

Answer 2

Uso del parents() selector para obtener todos los padres de un elemento. Luego puede buscar en la colección o iterar sobre ella si desea afectar a todos los antepasados.

Answer 3

Además de parents(), como ya han dicho, también debe check out closest(). Lea la comparación en la documentación allí, pero sus diferencias principales son que busca solo un resultado, e incluye $(this) en lo que busca (podría obtener lo que está buscando si no es lo suficientemente específico). Pros y contras.

Answer 4

Escribí este plugin simple porque pensé que tenía una selección de clase inequívoca en alguna parte que me daba errores. La selección de abuelos parecía más directa que $().parents() para este caso en particular.

Bueno, usé esto una vez y me di cuenta de que en realidad tenía un error de ortografía. No estoy seguro de lo útil que realmente es. $('myelem').gparent(2); te consigue el abuelo de 'myelem'.

(function($){ 
$.fn.gparent = function(recursion){ 
    if(recursion == undefined) recursion = 2; 
    if(typeof(recursion) == "number"){ 
     recursion = parseInt(recursion); 
     if(recursion > 0){ 
      gparent_holder = $(this); 
      for(var gparent_i = 0; gparent_i < recursion; gparent_i++){ 
       gparent_holder = gparent_holder.parent(); 
      } 
      return gparent_holder; 
     } 
     else return false; 
    } 
    else return false; 
} 
})(jQuery); 

Answer 5

@Femi tenía una respuesta a ello, y recursividad menciona, sin embargo, su solución no era recursiva, he aquí una solución recursiva jQuery para conseguir ancestros de un elemento:

$.fn.gparent = function(recursion){ 
    console.log('recursion: ' + recursion); 
    if(recursion > 1) return $(this).parent().gparent(recursion - 1); 
    return $(this).parent(); 
}; 

Si esta es tu HTML:

<div id='grandparent'> 
    <div id='parent'> 
    <div id='child'> 
     child 
    </div> 
    </div> 
</div> 

puede llamar

console.log($('#child').gparent(2)); 

para obtener el abuelo del elemento child. Here's the JSFiddle