JAVASCRIPT LÄHIN()

Lähimmän esi-isän hakemiseen käytetään JavaScriptin lähin()-menetelmää, tai elementin vanhempi vastaa valitsimia. Jos esi-isää ei löydy, menetelmä palauttaa tyhjä .

Tämä menetelmä kulkee elementin ja sen vanhempien läpi dokumenttipuussa, ja läpikulku jatkuu, kunnes löydetään ensimmäinen solmu, joka vastaa annettua valintamerkkijonoa.

Syntaksi

 targetElement.closest(selectors);

Yllä olevassa syntaksissa valitsimia on merkkijono, joka sisältää valitsimen (kuten p:hover jne.) käytetään solmun löytämiseen.

Ymmärretään tämä menetelmä käyttämällä joitain kuvia.

Esimerkki1

Tässä esimerkissä on kolme div-elementtiä ja otsikko, johon käytämme lähin () menetelmä. Tässä käyttämämme valitsimet ovat id valitsin, jälkeläinen valitsin, lapsi valitsin ja :ei valitsin.

 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);

Testaa nyt

Lähtö

Yllä olevan koodin suorittamisen jälkeen tulos on -

Esimerkki2

Tämä on toinen esimerkki käytöstä JavaScript 's lähin () menetelmä.

 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);