Metoda najbliższy() w JavaScript służy do pobierania najbliższego przodka lub elementu nadrzędnego odpowiadającego selektorom. Jeśli nie znaleziono przodka, metoda zwraca zero .
Ta metoda przechodzi przez element i jego rodziców w drzewie dokumentu, a przeglądanie jest kontynuowane do momentu znalezienia pierwszego węzła, który pasuje do podanego ciągu selektora.
Składnia
targetElement.closest(selectors);
W powyższej składni selektory to ciąg zawierający selektor (np p: najedź itp.) używane do znajdowania węzła.
Przyjrzyjmy się tej metodzie, korzystając z ilustracji.
Przykład 1
W tym przykładzie istnieją trzy elementy div i nagłówek, do którego stosujemy najbliższy() metoda. Tutaj selektory, których używamy, to ID selektor, potomek selektor, dziecko selektor i :nie selektor.
This is the first div element. <h3 id="h"> This is a heading inside the div. </h3> This is the div inside the div element. This is the div element inside the second div element. var val1 = document.getElementById('div3'); var o1 = val1.closest('#div1'); var o2 = val1.closest('div div'); var o3 = val1.closest('div > div'); var o4 = val1.closest(':not(#div3)'); console.log(o1); console.log(o2); console.log(o3); console.log(o4);Przetestuj teraz
Wyjście
Po wykonaniu powyższego kodu wyjściem będzie -
Przykład2
To kolejny przykład użycia JavaScript 'S najbliższy() metoda.
This is the div element. <p id="p1"> This is the paragraph element inside the div element. </p><h3 id="h"> This is the child of the paragraph element. <p id="p2"> This is the child of heading element of the paragraph element. </p> </h3> <p></p> var val1 = document.getElementById('p2'); var o1 = val1.closest('p'); var o2 = val1.closest('h3'); var o3 = val1.closest('div'); console.log(o1); console.log(o2); console.log(o3);Przetestuj teraz
Wyjście
Po wykonaniu powyższego kodu wyjściem będzie -