Share
Avec jQuery, la sélection d’éléments HTML est ridiculement facile. Mais parfois, nous pouvons souhaiter affiner davantage la sélection, ce qui peut être compliqué lorsque la structure HTML est compliquée. Dans ce tutoriel, nous explorerons dix façons d'affiner et d'étendre un ensemble d'éléments encapsulés sur lesquels nous souhaitons opérer..
Tout d’abord, jetons un coup d’œil à la simple page Web illustrée dans la figure ci-dessous. Nous allons sélectionner des éléments tout au long de ce tutoriel.
Mais pourquoi avons-nous besoin d'affiner davantage un ensemble d'éléments? La syntaxe de sélection de jQuery n'est-elle pas assez puissante??
Voyons un exemple. Sur la page Web mentionnée ci-dessus, lorsque l’on clique sur une étoile, on peut souhaiter ajouter la classe 'on' à cette étoile même et toutes les étoiles situées à sa gauche. Et nous voudrons peut-être changer la couleur de fond de la division parente des étoiles. Nous avons donc le code suivant.
Accentsconagua
$ ('. star'). click (function () $ (this) .addClass ('on'); // Comment sélectionner le div parent de 'this'? // Comment sélectionner des étoiles à gauche de 'ce'? ); Dans Line 2, nous sélectionnons l’étoile sur laquelle on clique avec 'ce'. Mais comment choisit-on le parent div des étoiles? Oui ce est div.rating. Mais il peut y avoir une douzaine d'autres div.ratings dans une page, non? Alors, quel est celui que nous voulons? Et comment sélectionnons-nous toutes les étoiles à gauche de 'ce'?
Heureusement, jQuery nous permet d'obtenir de nouveaux ensembles encapsulés à partir d'un ensemble existant, en fonction des relations hiérarchiques. Et c’est en partie ce que font les fonctions transversales.
Cette fonction récupère les enfants immédiats d'un ensemble d'éléments.
Cela peut être très utile dans une variété de situations. Regardez la figure ci-dessous:
Cette fonction filtre les éléments du jeu enveloppé à l'aide d'une expression de sélecteur passée. Tous les éléments qui ne correspondent pas à l'expression seront supprimés de la sélection..
L'exemple suivant devrait être assez simple. Les étoiles pleines sont filtrées d'une collection de toutes les cinq étoiles.
Bien au contraire de filter (), not () supprime les éléments correspondants du jeu enveloppé..
Voir l'exemple ci-dessous. Même les étoiles sont supprimées de la sélection, ne laissant que les impairs.
Remarquer! Les sélecteurs "pair" et "impair" sont indexés à zéro. Ils comptent l'indice à partir de 0, pas 1.
Que faire si nous voulons ajouter des éléments à l'ensemble emballé? La fonction add () fait cela.
Encore une fois, très simple. La boîte à photos est ajoutée à la sélection.
Parfois, nous pouvons souhaiter obtenir un sous-ensemble de l'ensemble enveloppé, en fonction de la position des éléments dans l'ensemble. Et slice () est le chemin à parcourir.
La fonction parent () sélectionne le parent direct d'un ensemble d'éléments.
Comme le montre la figure ci-dessous, le parent direct de la première étoile est sélectionné. Très pratique, hah? Il est à noter que seul le parent direct sera renvoyé, raison pour laquelle il est singulier. Aucun grand-parent ou ancêtre ne sera sélectionné.
Celui-ci est pluriel! La fonction parents () sélectionne tous les ancêtres d'un ensemble d'éléments. Je parle de TOUS les ancêtres depuis le parent direct jusqu’à «corps' et 'html'. Il est donc préférable de passer une expression de sélecteur pour affiner le résultat.
En passant.récipient'aux parents (), div.container, qui est en fait le grand-parent de la première étoile, est sélectionné.
Cette fonction sélectionne tous les frères et soeurs d’un ensemble d’éléments. Une expression peut être passée pour filtrer le résultat.
Regardez l'exemple:
La fonction prev () sélectionne le frère précédent (un), et prevAll () sélectionne tous les frères et soeurs précédents d'un ensemble d'éléments.
Ceci est très pratique si vous construisez un widget de classement par étoiles. Les frères et soeurs précédents de la troisième étoile sont sélectionnés.
Ces fonctions fonctionnent de la même manière que prev et prevAll, sauf qu'elles sélectionnent les frères NEXT..
Voyons enfin comment ces fonctions résolvent pour nous les maux de tête du monde réel.
$ ('. star'). click (function () $ (this) .addClass ('on'); // Comment sélectionner le div parent de 'this'? $ (this) .parent (). addClass ( 'rated'); // Comment sélectionner les étoiles à gauche de 'this'? $ (this) .prevAll (). addClass ('on'); $ (this) .nextAll (). removeClass ('on' );); C’est le problème que nous avons mentionné au début de ce tutoriel, non? Plusieurs fonctions de déplacement sont utilisées dans ces lignes de code.
Nous avons maintenant une idée de l’utilité des fonctions de parcours. Ils peuvent être encore plus puissants lorsqu'ils sont utilisés ensemble. La sortie d’une fonction peut être l’entrée d’une autre, c’est-à-dire qu’elles peuvent être chaînées.
Merci d'avoir lu! Espérons que ce tutoriel vous simplifie la vie lorsque vous sélectionnez des éléments HTML avec jQuery. Des pensées? Quelles fonctions de déplacement avons-nous manquées?
