Découvrez comment utiliser la puissance des filtres enfants du Framework jQuery.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment implémenter les filtres enfants du Framework jQuery
Bonjour à tous et bienvenu sur Développement Facile.
Encore un nouveau cours consacré à ce Framework exceptionnel qui se nomme jQuery, et là vous allez découvrir les filtres enfants, comment sélectionner des enfants, tout ça, avec les raccourcis jQuery.
Les filtres enfants
On rentre toujours dans le vif du sujet, en fait c’est la suite du cours précédent sur les filtres de base, ul : first-child ça sélectionne le premier enfant, le premier élément de la liste, il faut savoir que first-child peut sélectionner plusieurs éléments, un pour chaque parent, à ne pas confondre avec : first que vous avez vu dans le cours précédent qui sélectionne un seul élément et c’est le premier en plus. Là sur votre écran vous avez un exemple de code source, li : first-child ça va sélectionner le premier élément de la liste, et rajouter une bordure, donc après si vous avez plusieurs listes justement, ça va pouvoir sélectionner dans chaque listes, le premier élément, c’est l’avantage de first-child.
ul last-child, ça va sélectionner le dernier enfant de la liste, le dernier élément de votre liste à puce, comme précédemment vous avez un exemple de code source, ça va mettre une bordure sur module5, je vous encourage comme d’habitude, à reprendre le code source, et à le tester pour bien comprendre visuellement ce que ça donne comme résultat, c’est très important.
Ensuite vous avez ul.li :nth-child-index, ça va sélectionner le second élément de la liste en sachant que dans le cours précédent c’était avec une valeur d’index qui commence à zéro, et là avec ce raccourci la valeur d’index 1 correspond au premier élément, dans l’exemple ul li :nth-child2 ça va sélectionner module2 directement et lui rajouter une bordure.
Ensuite, vous avez exactement, si vous vous rappelez du cours précédent, le même type odd, event tout ça, li :nth-child odd, ça va sélectionner les éléments internes de la liste, toujours la valeur d’index1 qui correspond au premier élément, dans l’exemple ça va mettre une bordure sur module1, module3, module 5, tous les éléments impairs de la liste, avec event li :nth-child even ça va sélectionner tous les éléments pairs de la liste, donc module2 et module4 vont avoir une bordure.
Ensuite vous pouvez un peu compliquer les filtres pour faire des sélections beaucoup plus précises dans votre document HTML, p a : only-child, ça va sélectionner les balises a qui n’ont pas de frères dans toutes les divisions rencontrées, ça sélectionne tous les éléments sans enfants ou uniques de leurs parents et si le parent à plusieurs enfants, aucune sélection ne sera effectuée. Dans cet exemple, je vous invite à le tester directement et comme ça vous verrez le résultat par vous-même.
Exemple d’application
Je vous montre un exemple de code source, comme d’habitude, alors comme pour le dernier cours j’ai commenté les différents raccourcis jQuery, ce sera à vous de les dé commenter comme ça vous pourrez voir les résultats ici, en direct, donc là ça va sélectionner les éléments pairs de la liste ici, donc module2 et module4 on rajoute un fond, et là ça va sélectionner les balises a qui n’ont pas de frères, et bien vous avez dans une balise paragraphe, on va dans la balise paragraphe, on regarde si il y a des frères, là vous voyez bien que la balise a, il y a des frères, ils sont 3 dans cette balise paragraphe, ils sont 2, donc si il y a des frères ce n’est pas possible.
Par contre dans cette balise paragraphe, il n’y a pas de frère, il est tout seul, quand on trouve une balise dans une balise paragraphe, une balise a toute seule, on lui rajoute une couleur de fond qui est matérialisée visuellement sur votre écran, il y a uniquement chapitre 6 qui est sélectionné.
Votre plan d’actions !
Comme d’habitude, c’est très important de mettre en pratique les cours, donc c’est à vous de jouer, téléchargez l’exemple de code source directement sous ce cours vidéo, si vous avez des questions, posez-les sous ce cours vidéo, et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple jQuery
Et voici le code source JavaScript avec des filtres enfants jQuery.
Téléchargement du code source Exemple de code JavaScript utilisant les filtres enfants de jQuery
