Jak uzyskać element nadrzędny n-tego poziomu elementu w jQuery?

Kiedy chcę na przykład uzyskać rodzica trzeciego poziomu elementu, który muszę napisać $('#element').parent().parent().parent()Czy jest na to bardziej optymalna metoda?

Ponieważ parent () zwraca elementy przodków uporządkowane od najbliższych do zewnętrznych, możesz połączyć je w eq () :

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

W zależności od Twoich potrzeb, jeśli wiesz, jakiego rodzica szukasz, możesz użyć selektora .parents ().

Np .: 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());

Przykład z użyciem indeksu:

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

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

Możesz nadać docelowemu rodzicowi identyfikator lub klasę (np. MyParent) i odwołanie jest z $('#element').parents(".myParent")

Szybszym sposobem jest bezpośrednie użycie javascript, np.

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

Działa to znacznie szybciej w mojej przeglądarce niż łańcuchowe .parent()wywołania jQuery .

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

Nie znalazłem żadnej odpowiedzi przy użyciu closest() i myślę, że jest to najprostsza odpowiedź, gdy nie wiesz, o ile poziomów wyżej jest wymagany element, więc opublikowanie odpowiedzi:
Możesz użyć closest()funkcji połączonej z selektorami, aby uzyskać pierwszy element, który pasuje przy przechodzeniu w górę od elementu:

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

To proste. Po prostu użyj

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

gdzie 0 to poziom nadrzędny (0 to rodzic, 1 to rodzic itp.)

Po prostu dodaj :eq()selektor w ten sposób:

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

Po prostu określasz indeks, który rodzic: 0 dla bezpośredniego rodzica, 1 dla dziadka, ...

Jeśli planujesz ponownie wykorzystać tę funkcjonalność, optymalnym rozwiązaniem jest stworzenie wtyczki jQuery:

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

Oczywiście możesz chcieć go rozszerzyć, aby umożliwić opcjonalny selektor i inne tego typu rzeczy.

Jedna uwaga: to używa 0indeksu opartego na rodzicach, więc nthParent(0)jest to to samo co dzwonienieparent() . Jeśli wolisz 1indeksowanie na podstawie, użyjn-- > 0

Jeśli mają wspólny div można użyć parentsUntil () odnośnik

na przykład: $('#element').parentsUntil('.commonClass')

Zaletą jest to, że nie musisz pamiętać, ile pokoleń istnieje między tym elementem a wspólnym rodzicem (zdefiniowanym przez commonclass).

możesz także użyć :

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

np .: $(this).ancestors().eq(2)-> rodzic rodzica this.

Możesz użyć czegoś takiego:

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

użycie eq wydaje się przechwytywać dynamiczny DOM, podczas gdy użycie .parent (). parent () wydaje się przechwytywać DOM, który został pierwotnie załadowany (jeśli to w ogóle możliwe).

Używam ich obu na elemencie, do którego zastosowano klasy w onmouseover. eq pokazuje klasy, podczas gdy .parent (). parent () nie.

Ponieważ parent () zwraca listę, to również działa

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