Pourquoi jQuery sélectionne-t-il uniquement le premier élément avec un ID en double ?

HTML invalide : plusieurs éléments avec le même ID

Description du problème :

Dans le étant donné la structure HTML, il existe trois boutons avec le même identifiant, « xyz ». Cependant, lorsque vous utilisez le sélecteur d'ID jQuery $("#xyz") pour gérer les événements onClick, seul le premier bouton répond. Les autres boutons sont ignorés.

Analyse :

Le sélecteur d'ID jQuery est conçu pour sélectionner le premier élément avec un ID correspondant dans le document. Cependant, selon les spécifications du W3C, une valeur d'identification doit être unique au sein du document. Avoir plusieurs éléments avec le même ID est considéré comme un HTML invalide.

Comme mentionné dans la documentation de l'API jQuery, si plusieurs éléments ont le même ID, le sélecteur jQuery ne sélectionnera que le premier élément correspondant. Il n'est pas recommandé de s'appuyer sur ce comportement et le code HTML doit être corrigé pour garantir l'unicité des identifiants.

Solution :

Pour résoudre ce problème, remplacez l'attribut id par un attribut de classe pour les boutons. Cela permettra aux boutons d'avoir des valeurs différentes sans enfreindre les règles de validation HTML.

HTML révisé :

Script jQuery mis à jour :

Pour gérer les événements de clic pour tous les boutons avec la classe xyz, utilisez le jQuery suivant code :

Ce code mis à jour gérera correctement les événements onClick pour les trois boutons et affichera leurs valeurs respectives dans les zones d'alerte.

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!