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?
javascript
jquery
parent
Artur Keyan
źródło
źródło
Odpowiedzi:
Ponieważ parent () zwraca elementy przodków uporządkowane od najbliższych do zewnętrznych, możesz połączyć je w eq () :
źródło
$('.element').first().parents().eq(num);
[2]
zwróci podstawowy element DOM, użycieeq(2)
zwróci obiekt jQuery.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/
Przykład z użyciem indeksu:
źródło
Możesz nadać docelowemu rodzicowi identyfikator lub klasę (np. MyParent) i odwołanie jest z
$('#element').parents(".myParent")
źródło
Szybszym sposobem jest bezpośrednie użycie javascript, np.
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
źródło
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:źródło
To proste. Po prostu użyj
gdzie 0 to poziom nadrzędny (0 to rodzic, 1 to rodzic itp.)
źródło
Po prostu dodaj
:eq()
selektor w ten sposób:Po prostu określasz indeks, który rodzic: 0 dla bezpośredniego rodzica, 1 dla dziadka, ...
źródło
Jeśli planujesz ponownie wykorzystać tę funkcjonalność, optymalnym rozwiązaniem jest stworzenie wtyczki jQuery:
Oczywiście możesz chcieć go rozszerzyć, aby umożliwić opcjonalny selektor i inne tego typu rzeczy.
Jedna uwaga: to używa
0
indeksu opartego na rodzicach, więcnthParent(0)
jest to to samo co dzwonienieparent()
. Jeśli wolisz1
indeksowanie na podstawie, użyjn-- > 0
źródło
var p = 1 + n; while (p--) { $p = $p.parent(); }
i JEŚLI chcesz zmienić na oparty na 1, Javascript jest „falsey”, możesz użyć:while (n--) { $p = $p.parent();}
zapisanie czeku warunkowegonthParent(-2)
? Twój przykład jest zepsuty.(function($) { $.fn.nthParent = function(n) { return $(this).parents().eq(n); }; }(jQuery));
parents
który będzie niepoprawny dla selekcji z więcej niż jednym elementem.var p = n >? (1 + n):1;
zamiast tego zwróci w tym przypadku pierwszego rodzica zamiast „nic” - lub w miejscu, w którym przerywa pętlę w moim przykładzie. A więc prawdopodobnie powinno być:(function($) { $.fn.nthParent = function(n) { var $p = $(this); if (!(n > -0)) { return $() }; var p = 1 + n; while (p--) { $p = $p.parent(); } return $p; }; }(jQuery));
jeśli nie chcesz nic zwracać.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).
źródło
możesz także użyć :
np .:
$(this).ancestors().eq(2)
-> rodzic rodzicathis
.źródło
Możesz użyć czegoś takiego:
http://jsfiddle.net/Xeon06/AsNUu/
źródło
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.
źródło
Ponieważ parent () zwraca listę, to również działa
źródło