Utilisation de jQuery pour sélectionner les fonctions de traversée pour le format HTML complexe

10 fonctions très utiles traversal dans jQuery

Avec jQuery, vous pouvez facilement sélectionner des éléments HTML. Mais parfois, lorsque la structure HTML est plus complexe, l’élément de notre choix de raffinage est une chose pénible. Dans ce tutoriel, nous allons explorer 10 façons de perfectionner et d’étendre la collection que nous allons manipuler.

HTML

Tout d’abord, nous allons jeter un coup d’oeil sur les pages simples sur la figure ci-dessous, à travers lequel, nous allons sélectionner ces éléments.

Div.container est l’élément de package ;

Div.photo, Div.title et div.rating sont les sous-niveaux direct de div.container ;

Chaque div.star est un enfant de div.rating ;

Lorsque la classe de Div.satr est « on », c’est une étoile complète.

Pourquoi voulez-vous à parcourir ?

« Pourquoi n’avons-nous pas d’affiner une série d’éléments est en outre, jQuery choisissant syntaxe pas assez forte ? »

OK, commençons par l’exemple. Dans la page Web mentionnée ci-dessus, lorsque vous cliquez sur une étoile, nous devons ajouter la classe « sur » à elle et à chaque étoile sur la gauche. Dans le même temps, nous voulons changer la couleur d’arrière-plan de tous les éléments parents Star, donc notre code est comme suit :

$ (". Star »). Cliquez (function () {}

$ (This). addClass (« on ») ;

Comment sélectionner l’élément parent de l’objet en cours ?

Comment puis-je obtenir toutes les étoiles sur le côté gauche de l’actuelle étoile ?

});

Dans la deuxième ligne, nous sommes arrivés nous avons cliqués sur l’objet en cours. Mais comment obtenez-vous le parent d’étoiles ?, div.rating. Cependant, sur une page, il y a beaucoup de div.rating. Quel est ce que nous voulons ? comment faire toutes les étoiles sur le côté gauche de « this » ?

Heureusement, jQuery nous permet d’obtenir un nouvel ensemble d’éléments basés sur des collections existantes sur la base de ces relations de base. Et ce sont exactement où la fonction traversal fonctionne.

enfants 1,

Cette fonction obtient un enfant direct d’un ensemble d’éléments.

Dans de nombreux cas, il sera commode de jeter un oeil à l’image suivante :

Au début, toutes les étoiles dans le conteneur est sélectionné ;

Passer une expression de sélection pour enfants () pour affiner le résultat de la sélection à l’étoile sélectionné ;

Si Chilidren () chaque paramètre est acceptée, tout direct enfants sont retournés ;

Ne pas retourner les éléments au niveau du soleil.