¿Cómo obtengo el enésimo nivel primario de un elemento en jQuery?

Cuando quiero obtener, por ejemplo, el padre del tercer nivel del elemento que debo escribir $('#element').parent().parent().parent()¿Hay un método más óptimo para esto?

Como los padres () devuelven los elementos ancestrales ordenados desde los más cercanos a los externos, puede encadenarlos en eq () :

$('#element').parents().eq(0);  // "Father".
$('#element').parents().eq(2);  // "Great-grandfather".

Depende de tus necesidades, si sabes qué padre estás buscando, puedes usar el selector .parents ().

EG: http://jsfiddle.net/HenryGarle/Kyp5g/2/

<div id="One">
    <div id="Two">
        <div id="Three">
            <div id="Four">

            </div>
        </div>
    </div>
</div>


var top = $("#Four").parents("#One");

alert($(top).html());

Ejemplo usando el índice:

//First parent - 2 levels up from #Four
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);

alert($(topTwo ).html());

Puede darle al padre objetivo una identificación o clase (por ejemplo, myParent) y la referencia es con $('#element').parents(".myParent")

Una forma más rápida es usar javascript directamente, por ejemplo.

var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);

Esto funciona significativamente más rápido en mi navegador que encadenar .parent()llamadas jQuery .

Ver: http://jsperf.com/jquery-get-3rd-level-parent

No encontré ninguna respuesta usando closest() y creo que es la respuesta más simple cuando no sabes cuántos niveles tiene el elemento requerido, así que publica una respuesta:
puedes usar la closest()función combinada con selectores para obtener el primer elemento que coincida al atravesar hacia arriba desde el elemento:

('#element').closest('div')    // returns the innermost 'div' in its parents
('#element').closest('.container')    // returns innermost element with 'container' class among parents
('#element').closest('#foo')    // returns the closest parent with id 'foo'

Es sencillo. Solo usa

$(selector).parents().eq(0); 

donde 0 es el nivel primario (0 es primario, 1 es primario, etc.)

Simplemente agregue un :eq()selector como este:

$("#element").parents(":eq(2)")

Simplemente especifique el índice qué padre: 0 para el padre inmediato, 1 para el abuelo, ...

Si planea reutilizar esta funcionalidad, la solución óptima es hacer un complemento jQuery:

(function($){
$.fn.nthParent = function(n){
  var $p = $(this);
  while ( n-- >= 0 )
  {
    $p = $p.parent();
  }
  return $p;
};
}(jQuery));

Por supuesto, es posible que desee extenderlo para permitir un selector opcional y otras cosas similares.

Una nota: esto usa un 0índice basado para padres, por lo que nthParent(0)es lo mismo que llamar parent(). Si prefiere tener 1una indexación basada, usen-- > 0

Si tiene un div padre común, puede usar parentsUntil () enlace

p.ej: $('#element').parentsUntil('.commonClass')

La ventaja es que no necesita recordar cuántas generaciones hay entre este elemento y el padre común (definido por commonclass).

también puedes usar :

$(this).ancestors().eq(n) 

ex: $(this).ancestors().eq(2)-> el padre del padre de this.

Podrías usar algo como esto:

(function($) {
    $.fn.parentNth = function(n) {
        var el = $(this);
        for(var i = 0; i < n; i++)
            el = el.parent();

        return el;
    };
})(jQuery);

alert($("#foo").parentNth(2).attr("id"));

http://jsfiddle.net/Xeon06/AsNUu/

el uso de eq parece capturar el DOM dinámico mientras que el uso de .parent (). parent () parece capturar el DOM que se cargó inicialmente (si eso es posible).

Los uso a ambos en un elemento que tiene clases aplicadas en onmouseover. eq muestra las clases mientras que .parent (). parent () no.

Como los padres () devuelve una lista, esto también funciona

$('#element').parents()[3];