Tuvākā () metode JavaScript tiek izmantota, lai izgūtu tuvāko priekšteci, vai elementa vecākais atbilst atlasītājiem. Ja priekštecis nav atrasts, metode atgriežas null .
Šī metode šķērso elementu un tā vecākus dokumentu kokā, un pārvietošana turpinās, līdz tiek atrasts pirmais mezgls, kas atbilst norādītajai atlasītāja virknei.
Sintakse
targetElement.closest(selectors);
Iepriekš minētajā sintaksē atlasītāji ir virkne, kurā ir atlasītājs (piemēram, p:hover utt.), ko izmanto, lai atrastu mezglu.
Izpratīsim šo metodi, izmantojot dažas ilustrācijas.
Piemērs1
Šajā piemērā ir trīs div elementi un virsraksts, kuram mēs izmantojam tuvākais() metodi. Šeit mēs izmantojam atlasītājus id atlasītājs, pēcnācējs atlasītājs, bērns atlasītājs un : nē atlasītājs.
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);Izmēģiniet to tūlīt
Izvade
Pēc iepriekš minētā koda izpildes izvade būs -
Piemērs2
Šis ir vēl viens lietošanas piemērs JavaScript s tuvākais() metodi.
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);Izmēģiniet to tūlīt
Izvade
Pēc iepriekš minētā koda izpildes izvade būs -