El mètode closest() de JavaScript s'utilitza per recuperar l'avantpassat més proper o el pare de l'element coincideix amb els selectors. Si no es troba cap ancestre, el mètode torna nul .
Aquest mètode travessa l'element i els seus pares a l'arbre del document, i el recorregut continua fins que es troba el primer node que coincideix amb la cadena de selecció proporcionada.
Sintaxi
targetElement.closest(selectors);
En la sintaxi anterior, selectors és una cadena que conté un selector (com ara p: flotar , etc.) utilitzat per trobar un node.
Entendrem aquest mètode utilitzant algunes il·lustracions.
Exemple 1
En aquest exemple, hi ha tres elements div i un encapçalament al qual estem aplicant el més proper () mètode. Aquí, els selectors que estem utilitzant són els id selector, descendent selector, nen selector, i :no 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);Prova-ho ara
Sortida
Després de l'execució del codi anterior, la sortida serà -
Exemple 2
Aquest és un altre exemple d'ús JavaScript 's més proper () mètode.
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);Prova-ho ara
Sortida
Després de l'execució del codi anterior, la sortida serà -
