Maison > interface Web > js tutoriel > Comment parcourir des éléments HTML avec la même classe à l'aide de la méthode each() de jQuery ?

Comment parcourir des éléments HTML avec la même classe à l'aide de la méthode each() de jQuery ?

DDD
Libérer: 2024-10-19 20:45:02
original
453 Les gens l'ont consulté

How to Iterate Through HTML Elements with the Same Class Using jQuery's each() Method?

Parcourir des éléments HTML avec la même classe à l'aide de jQuery

Pour parcourir efficacement une série d'éléments HTML avec la même classe, jQuery fournit le méthode each(). Cette méthode constitue une solution itérative pratique pour les éléments DOM.

Pour démontrer l'utilisation de each(), considérez le scénario suivant :

Vous avez plusieurs

éléments de votre page Web, chacun étant affecté à la classe « témoignage ». Vous devez utiliser jQuery pour parcourir ces éléments un par un, en effectuant des actions spécifiques en fonction de chaque élément.

Le code jQuery pour y parvenir est simple :

$('.testimonial').each(function(i, obj) {
  // Perform your actions here
});
Copier après la connexion

Dans chaque( ), le premier paramètre ("i") représente la position de l'élément courant dans le tableau d'éléments de classe "témoignage", tandis que le deuxième paramètre ("obj") représente l'objet DOM de l'élément courant. Pour interagir avec l'élément, vous pouvez utiliser le wrapper jQuery $(this).

Par exemple, si vous souhaitez vérifier si une condition spécifique est vraie pour chaque élément, vous pouvez ajouter une instruction if dans chaque élément. () :

$('.testimonial').each(function(i, obj) {
  if ($(this).hasClass('active')) {
    // Perform actions for elements with class 'active'
  }
});
Copier après la connexion

La documentation de l'API jQuery fournit des informations complètes sur la méthode each(). Pour plus de conseils et d'exemples, reportez-vous à la documentation officielle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal