logo

JavaScript najbliżej()

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(&apos;div3&apos;); var o1 = val1.closest(&apos;#div1&apos;); var o2 = val1.closest(&apos;div div&apos;); var o3 = val1.closest(&apos;div &gt; div&apos;); var o4 = val1.closest(&apos;:not(#div3)&apos;); 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 -

JavaScript najbliżej()

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(&apos;p2&apos;); var o1 = val1.closest(&apos;p&apos;); var o2 = val1.closest(&apos;h3&apos;); var o3 = val1.closest(&apos;div&apos;); console.log(o1); console.log(o2); console.log(o3); 
Przetestuj teraz

Wyjście

Po wykonaniu powyższego kodu wyjściem będzie -

JavaScript najbliżej()