Metóda closest() v JavaScripte sa používa na získanie najbližšieho predka alebo rodiča prvku, ktorý zodpovedá selektorom. Ak sa nenájde žiadny predok, metóda sa vráti nulový .
Táto metóda prechádza cez prvok a jeho rodičov v strome dokumentu a prechádzanie pokračuje, kým sa nenájde prvý uzol, ktorý zodpovedá zadanému reťazcu selektora.
Syntax
targetElement.closest(selectors);
Vo vyššie uvedenej syntaxi selektory je reťazec obsahujúci selektor (napr p:vznášať sa , atď.) používané na nájdenie uzla.
Poďme pochopiť túto metódu pomocou niekoľkých ilustrácií.
Príklad 1
V tomto príklade sú tri prvky div a nadpis, na ktorý aplikujeme najbližšie() metóda. Tu sú selektory, ktoré používame id volič, potomok volič, dieťa volič a :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);Vyskúšajte to
Výkon
Po vykonaní vyššie uvedeného kódu bude výstupom -
Príklad2
Toto je ďalší príklad použitia JavaScript 's najbližšie() metóda.
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);Vyskúšajte to
Výkon
Po vykonaní vyššie uvedeného kódu bude výstupom -
