Como obtenho o pai do n-ésimo nível de um elemento no jQuery?

Quando eu quero obter, por exemplo, o pai do terceiro nível do elemento que devo escrever $('#element').parent().parent().parent()Existe um método mais ideal para isso?

Como parents () retorna os elementos ancestrais ordenados do mais próximo ao externo, você pode encadeá-lo no eq () :

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

Depende de suas necessidades, se você souber qual pai está procurando, poderá usar o seletor .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());

Exemplo usando índice:

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

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

Você pode dar ao pai de destino um ID ou classe (por exemplo, myParent) e a referência é com $('#element').parents(".myParent")

Uma maneira mais rápida é usar o javascript diretamente, por exemplo.

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

Isso funciona significativamente mais rápido no meu navegador do que encadear .parent()chamadas jQuery .

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

Não encontrei nenhuma resposta usando closest() e acho que é a resposta mais simples quando você não sabe quantos níveis estão acima do elemento necessário, portanto, postando uma resposta:
Você pode usar a closest()função combinada com seletores para obter o primeiro elemento correspondente ao percorrer o elemento para cima:

('#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'

É simples. Apenas use

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

onde 0 é o nível pai (0 é pai, 1 é pai etc)

Basta adicionar o :eq()seletor como este:

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

Você acabou de especificar o índice que pai: 0 para pai imediato, 1 para pai principal, ...

Se você planeja reutilizar essa funcionalidade, a solução ideal é criar um plug-in jQuery:

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

Obviamente, convém estendê-lo para permitir um seletor opcional e outras coisas.

Uma observação: isso usa um 0índice baseado para os pais, nthParent(0)o mesmo que chamar parent(). Se você preferir ter uma 1indexação baseada, usen-- > 0

Se você tem uma div pai comum, pode usar o link parentsUntil ()

por exemplo: $('#element').parentsUntil('.commonClass')

A vantagem é que você não precisa se lembrar de quantas gerações existem entre esse elemento e o pai comum (definido pela classe comum).

você também pode usar :

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

ex: $(this).ancestors().eq(2)-> o pai do pai de this.

Você poderia usar algo como isto:

(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/

o uso de eq parece capturar o DOM dinâmico, enquanto o uso de .parent (). parent () parece capturar o DOM que foi carregado inicialmente (se isso for possível).

Eu uso os dois em um elemento que tem classes aplicado em onmouseover. eq mostra as classes enquanto .parent (). parent () não.

Como parents () retorna uma lista, isso também funciona

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