Come posso ottenere il genitore di livello n-esimo di un elemento in jQuery?

Quando voglio ottenere, ad esempio, il genitore di 3 ° livello dell'elemento che devo scrivere $('#element').parent().parent().parent()Esiste un metodo più ottimale per questo?

Poiché parent () restituisce gli elementi antenati ordinati dal più vicino a quelli esterni, è possibile collegarlo in eq () :

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

Dipende dalle tue esigenze, se sai quale genitore stai cercando puoi usare il selettore .parents ().

Ad esempio: 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());

Esempio usando l'indice:

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

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

Potresti dare al genitore di destinazione un ID o una classe (ad esempio myParent) e il riferimento è con $('#element').parents(".myParent")

Un modo più veloce è usare javascript direttamente, ad es.

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

Questo è molto più veloce sul mio browser rispetto al concatenamento delle .parent()chiamate jQuery .

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

Non ho trovato alcuna risposta utilizzando closest() e penso che sia la risposta più semplice quando non sai quanti livelli sale l'elemento richiesto, quindi pubblicando una risposta:
puoi usare la closest()funzione combinata con i selettori per ottenere il primo elemento che corrisponde quando si attraversa verso l'alto dall'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'

È semplice. Basta usare

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

dove 0 è il livello principale (0 è principale, 1 è il padre principale ecc.)

Aggiungi :eq()selettore in questo modo:

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

Devi solo specificare quale genitore: 0 per genitore immediato, 1 per nonno, ...

Se hai intenzione di riutilizzare questa funzionalità, la soluzione ottimale è creare un plug-in jQuery:

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

Naturalmente, potresti voler estenderlo per consentire un selettore opzionale e altre cose del genere.

Una nota: utilizza un 0indice basato per i genitori, quindi nthParent(0)equivale a chiamare parent(). Se preferisci avere l' 1indicizzazione basata, usan-- > 0

Se hai un div genitore comune puoi usare il collegamento parentUntil ()

per esempio: $('#element').parentsUntil('.commonClass')

Il vantaggio è che non è necessario ricordare quante generazioni ci sono tra questo elemento e il genitore comune (definito da commonclass).

puoi anche usare:

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

es: $(this).ancestors().eq(2)-> il genitore del genitore di this.

Puoi usare qualcosa del genere:

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

l'utilizzo di eq sembra afferrare il DOM dinamico mentre l'uso di .parent (). parent () sembra afferrare il DOM che è stato inizialmente caricato (se ciò è persino possibile).

Li uso entrambi su un elemento a cui sono state applicate classi su onmouseover. eq mostra le classi mentre .parent (). parent () non lo fa.

Come genitori () restituisce un elenco, anche questo funziona

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