The mamă() metoda din jQuery găsește părintele direct al selectorului dat. Este o funcție încorporată în jQuery. Această metodă parcurge doar un singur nivel în sus în arborele DOM și returnează părintele direct al elementului selectat.
The mamă() metoda este similară cu cea părinţi() metoda, deoarece ambii se deplasează în arborele DOM și returnează elementul părinte. Dar diferența este că părinţi() metoda traversează mai multe niveluri în sus în arborele DOM și returnează toți strămoșii, inclusiv un bunic, un străbunic etc. ai selectorului dat, în timp ce mamă() metoda traversează un singur nivel în sus și returnează doar părintele direct al selectorului dat.
Sintaxă
$(selector).parent(filter)
The selector în sintaxa de mai sus reprezintă elementul selectat al cărui părinte urmează să fie căutat. The filtru în sintaxa de mai sus este parametrul opțional care specifică expresia selectorului, care este folosită pentru a restrânge căutarea.
Exemplul 1
În acest exemplu, nu folosim parametrul opțional al mamă() metodă. Aici, există un element div care conține a ul element, un titlu h2 , și un element de paragraf.
Aplicam mamă() metodă de căutare a părintelui titlului h2. Dacă folosim părinţi() metoda în loc de a folosi mamă() metoda, toți strămoșii rubricii h2, inclusiv elementul corp, vor fi evidențiați.
.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 Testează-l acum Ieșire:
După executarea codului de mai sus, rezultatul va fi -
După ce faceți clic pe butonul dat, rezultatul va fi -
Exemplul 2
În acest exemplu, folosim parametrul opțional al mamă() metoda de a găsi părintele elementului primul paragraf. Aici, există mai multe elemente de paragraf, dar trebuie să găsim părintele primului element de paragraf. Deci, trecem pseudo-selectorul ( :primul ) ca valoare opțională a mamă() metodă.
.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 După executarea codului de mai sus, rezultatul va fi -
După ce faceți clic pe butonul dat, rezultatul va fi -
Exemplul3
În acest exemplu, folosim parametrul opțional al mamă() metodă de găsire a părintelui specific al selectorului dat. Aici, există trei elemente de paragraf cu părinți diferiți. Găsim h2 părintele elementului paragraf. Deci, pentru a realiza același lucru, trebuie să trecem h2 ca valoare opțională a mamă() metodă.
.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 Testează-l acum Ieșire:
După executarea codului de mai sus, rezultatul va fi -
După ce faceți clic pe butonul dat, rezultatul va fi -
