En utilisant jQuery , vous pouvez facilement sélectionner des éléments HTML . Mais parfois, lorsque la structure HTML est plus complexe, affiner les éléments que nous choisissons est une tâche difficile. Dans ce didacticiel, nous explorerons dix façons d’affiner et d’élargir les collections avec lesquelles nous travaillerons.
HTML
Tout d’abord, regardons la page simple présentée ci-dessous, et à travers ce tutoriel, nous sélectionnerons les éléments.
.gif)
" Pourquoi devons-nous affiner davantage une série d'éléments ? Est-ce parce que la syntaxe de sélection jQuery n'est pas assez puissante ? "
Bon, commençons par un exemple. Dans la page Web mentionnée ci-dessus, lorsqu'on clique sur une étoile , nous devons y ajouter la classe "on" et chaque étoile à gauche . En même temps, nous souhaitons changer la couleur d’arrière-plan de tous les éléments parents étoiles , notre code est donc le suivant :
Sur la deuxième ligne, nous obtenons l'objet actuel sur lequel nous avons cliqué. Mais comment obtenir le parent des stars ? C'est div.rating . Cependant, sur une seule page, il existe de nombreux div.rating . Lequel voulons-nous ? Comment mettre toutes les étoiles à gauche de "ceci" ?
La bonne nouvelle est que jQuery nous permet d'obtenir de nouvelles collections d'éléments basées sur des collections existantes basées sur ces relations de base. Et c’est là que les fonctions de traversée entrent en jeu.
1. les enfants
Cette fonction récupère les enfants directs d'un ensemble d'éléments.
Cela peut être très pratique dans de nombreuses situations, jetez un œil à l'image ci-dessous :
.gif)
$('.star').click(function(){
$(this).addClass('on');
// Comment sélectionner l'élément parent de l'objet courant ?
// Comment placer toutes les étoiles à gauche de l' étoile actuelle ?
});