Comment implémenter les filtres enfants du Framework jQuery

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

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.

Downloads

Comment utilisez-vous les filtres enfants dans vos applications ?

Dites-moi dans les commentaires, pour quelles fonctionnalités, vous utilisez les filtres enfants du framework jQuery.

Créez Rapidement des Sites Hyper-Interactifs avec vos utilisateurs grâce à la Formation Gratuite jQuery Facile !

Recevez les Stratégies pour utiliser le Potentiel des Frameworks jQuery et Dojo
+
Logo jQuery
+
Des Tutoriels Gratuits Supplémentaires pour utiliser toute la "Richesse" du Framework de Google : AngularJS