Metoda closest() din JavaScript este folosită pentru a prelua cel mai apropiat strămoș sau părintele elementului se potrivește cu selectorii. Dacă nu există niciun strămoș găsit, metoda revine nul .
Această metodă străbate elementul și părinții săi în arborele documentului, iar parcurgerea continuă până când este găsit primul nod care se potrivește cu șirul de selectare furnizat.
Sintaxă
targetElement.closest(selectors);
În sintaxa de mai sus, selectoare este un șir care conține un selector (cum ar fi p: hover , etc.) folosit pentru a găsi un nod.
Să înțelegem această metodă folosind câteva ilustrații.
Exemplul 1
În acest exemplu, există trei elemente div și un titlu pe care aplicăm cel mai apropiat() metodă. Aici, selectoarele pe care le folosim sunt id selector, descendent selector, copil selector și :nu selector.
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);Testează-l acum
Ieșire
După executarea codului de mai sus, rezultatul va fi -
Exemplul 2
Acesta este un alt exemplu de utilizare JavaScript lui cel mai apropiat() metodă.
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);Testează-l acum
Ieșire
După executarea codului de mai sus, rezultatul va fi -
