Le parent() La méthode dans jQuery trouve le parent direct du sélecteur donné. C'est une fonction intégrée à jQuery. Cette méthode ne parcourt qu'un seul niveau dans l'arborescence DOM et renvoie le parent direct de l'élément sélectionné.
Le parent() la méthode est similaire à celle parents() méthode, car les deux voyagent jusqu'à l'arborescence DOM et renvoient l'élément parent. Mais la différence est que le parents() La méthode parcourt plusieurs niveaux dans l'arborescence DOM et renvoie tous les ancêtres, y compris un grand-parent, un arrière-grand-parent, etc. du sélecteur donné, tandis que la méthode parent() La méthode parcourt un seul niveau et renvoie uniquement le parent direct du sélecteur donné.
Syntaxe
$(selector).parent(filter)
Le sélecteur dans la syntaxe ci-dessus représente l'élément sélectionné dont le parent doit être recherché. Le filtre dans la syntaxe ci-dessus se trouve le paramètre facultatif qui spécifie l'expression du sélecteur, utilisée pour affiner la recherche.
Exemple 1
Dans cet exemple, nous n'utilisons pas le paramètre facultatif du parent() méthode. Ici, il y a un élément div qui contient un ul élément, un titre h2 , et un élément de paragraphe.
Nous appliquons le parent() méthode de recherche du parent de la rubrique h2. Si nous utilisons le parents() méthode au lieu d'utiliser la parent() , tous les ancêtres de la rubrique h2, y compris l'élément body, seront mis en évidence.
.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 Testez-le maintenant Sortir:
Après l'exécution du code ci-dessus, le résultat sera -
Après avoir cliqué sur le bouton donné, la sortie sera -
Exemple2
Dans cet exemple, nous utilisons le paramètre facultatif du parent() méthode pour trouver le parent du premier élément de paragraphe. Ici, il y a plusieurs éléments de paragraphe mais nous devons trouver le parent du premier élément de paragraphe. Nous passons donc le pseudo-sélecteur ( :d'abord ) comme valeur facultative du parent() méthode.
.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 Après l'exécution du code ci-dessus, le résultat sera -
Après avoir cliqué sur le bouton donné, la sortie sera -
Exemple3
Dans cet exemple, nous utilisons le paramètre facultatif du parent() méthode pour trouver le parent spécifique du sélecteur donné. Ici, il y a trois éléments de paragraphe avec des parents différents. Nous trouvons le h2 parent de l’élément paragraphe. Donc, pour obtenir le même résultat, nous devons passer le h2 comme valeur facultative du parent() méthode.
.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 Testez-le maintenant Sortir:
Après l'exécution du code ci-dessus, le résultat sera -
Après avoir cliqué sur le bouton donné, la sortie sera -
