Les fonctions parent() et parents() de jQuery

En JavaScript, les possibilités de manipulation des contenus et des styles d’une page HTML sont quasiment infinies. En ajoutant un peu de jQuery, la tâche devient beaucoup plus aisée. Bien que la documentation de jQuery soit très complète et propose des exemples concrets, il m’arrive régulièrement de m’interroger sur le comportement de certaines fonctions dans des cas très particuliers. Aujourd’hui, je me suis amusé avec les fonctions parent() et parents(), je vous partage donc cette petite expérimentation :

Voir la démo – Fonctions parent() et parents() de jQuery

Extrait du code HTML :

<div class="level1 impact">
	Div level 1 (impact)
	<div class="level2">
		Div level 2
		<div class="level3 impact">
			Div level 3 (impact)
			<div class="level4" id="last-tag">
				Div level 4
			</div>
		</div>
	</div>
</div>

Extrait du code JavaScript :

// CAS n°1
// En partant de la balise portant l'id "last-tag"
// pour tous les parents portant la classe "impact"
// fixer la hauteur maximale des blocs à 10px (propriété non-héritée)
$("#last-tag").parents(".impact").css("height", "10px"); // Effet sur la balise sélectionnée uniquement

// CAS n°2
// En partant de la balise portant l'id "last-tag"
// pour tous les parents portant la classe "impact"
// fixer la largeur des blocs à 50% (propriété héritée)
$("#last-tag").parents(".impact").css("width", "50%"); // Effet sur la balise sélectionnée et ses enfants		

// CAS n°3
// En partant de la balise portant l'id "last-tag"
// si le premier parent porte la classe "level2"
// changer la couleur de fond en bleu (propriété non-héritée)
$("#last-tag").parent(".level2").css("background", "blue"); // Aucun effet (#last-tag n'a pas de parent direct .level2)

// CAS n°4
// En partant de la balise portant l'id "last-tag"
// pour le premier parent portant la classe "impact"
// changer la couleur de la bordure en vert (propriété non-héritée)
$("#last-tag").parents(".impact").first().css("border-color", "green"); // Effet sur la balise sélectionnée uniquement

// CAS n°4 BIS
// L'utilisation de closest() à la place de parents().first() produit un comportement similaire
// attention tout de même car closest() part de la balise courante, tandis que parents() part de balise parente
 $("#last-tag").closest(".impact").css("border-color", "green");

Pour le cas n°1, on cherche l’ensemble des parents portant la classe impact et on fixe leur hauteur à 10px. Etant donné que la propriété de hauteur n’est pas héritée par défaut, seuls les blocs level1 et level3 qui portent la classe impact sont affectés. Pour le cas n°2, on réalise la même opération, mais sur une propriété héritable (la largeur), l’ensemble des blocs sous-jacents au bloc impacté de plus haut niveau sont donc affecté. Ici le bloc de plus haut niveau impacté est le level1, ce sont donc tous les blocs qui seront réduit à la moitié de la largeur de leur parent.

Dans la cas n°3, la fonction cherche un parent direct portant la classe level2, comme aucun le parent direct ne rempli pas ce critère, aucune action n’est effectuée. Pour les cas n°4 et 4 bis, on cherche à impacter uniquement le premier parent correspondant au critère de sélection. Attention tout de même, car il existe une différence subtile entre l’utilisation de closest() et parents() : la première fonction partira de l’élément courant, tandis que la deuxième partira de l’élément parent.

Télécharger le fichier source – jquery-parent-parents.html

Vous pouvez retrouver toutes les fonctions de parcours du DOM sur le site de jQuery

Facebooktwitterlinkedinmail

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.