El pare () El mètode a jQuery troba el pare directe del selector donat. És una funció integrada a jQuery. Aquest mètode només travessa un sol nivell cap amunt a l'arbre DOM i retorna el pare directe de l'element seleccionat.
El pare () mètode és similar al pares () mètode, ja que tots dos viatgen fins a l'arbre DOM i retornen l'element pare. Però la diferència és que el pares () El mètode travessa diversos nivells a l'arbre DOM i retorna tots els avantpassats, inclosos un avis, un besavi, etc. del selector donat, mentre que el mètode pare () El mètode travessa un sol nivell cap amunt i només retorna el pare directe del selector donat.
Sintaxi
$(selector).parent(filter)
El selector a la sintaxi anterior representa l'element seleccionat el pare del qual s'ha de cercar. El filtre a la sintaxi anterior hi ha el paràmetre opcional que especifica l'expressió selector, que s'utilitza per restringir la cerca.
Exemple 1
En aquest exemple, no estem utilitzant el paràmetre opcional del pare () mètode. Aquí, hi ha un element div que conté a ul element, un encapçalament h2 , i un element paràgraf.
Estem aplicant el pare () mètode per cercar el pare de l'encapçalament h2. Si fem servir el pares () mètode en lloc d'utilitzar el pare () mètode, es destacaran tots els avantpassats de l'encapçalament h2, inclòs l'element del cos.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 10px; margin: 17px; } function fun(){ $(document).ready(function(){ $('h2').parent().css({ 'font-size': '30px', 'color': 'blue', 'border': '6px dashed blue'}); }); } div <ul> ul <h2> Heading h2 <p> Paragraph element </p> </h2> </ul> click me Prova-ho ara Sortida:
Després de l'execució del codi anterior, la sortida serà -
Després de fer clic al botó donat, la sortida serà -
Exemple 2
En aquest exemple estem utilitzant el paràmetre opcional del pare () mètode per trobar el pare de l'element del primer paràgraf. Aquí, hi ha més d'un element de paràgraf, però hem de trobar el pare del primer element de paràgraf. Per tant, estem passant el pseudoselector ( :primer ) com a valor opcional de la pare () mètode.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent(':first').css({'color': 'blue', 'border': '3px dashed blue'}); }); } body div1 div2 <h2> h2 <p> Paragraph element </p> </h2> <h2> h2 <p> Paragraph element </p> </h2> click me Després de l'execució del codi anterior, la sortida serà -
Després de fer clic al botó donat, la sortida serà -
Exemple 3
En aquest exemple estem utilitzant el paràmetre opcional del pare () mètode per trobar el pare específic del selector donat. Aquí, hi ha tres elements de paràgraf amb diferents pares. Estem trobant el h2 pare de l'element paràgraf. Per tant, per aconseguir el mateix hem de passar el h2 com el valor opcional de la pare () mètode.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent('h2').css({'color': 'blue', 'border': '5px dashed blue'}); }); } body div1 div2 <p> Paragraph element </p> <h2> h2 <p> Paragraph element </p> </h2> <ul> ul <p> Paragraph element </p> </ul> click me Prova-ho ara Sortida:
Després de l'execució del codi anterior, la sortida serà -
Després de fer clic al botó donat, la sortida serà -
