Pourquoi mon sélecteur d'ID jQuery affecte-t-il uniquement le premier élément ?

Le sélecteur d'ID jQuery cible uniquement le premier élément

Présentation

Cet article aborde un problème dans lequel le sélecteur d'ID jQuery (#xyz) ne parvient pas à cibler plusieurs éléments avec la même valeur d'ID. Au lieu de cela, il fonctionne uniquement sur le premier élément correspondant, laissant les éléments suivants sans réponse. Ce comportement est attribué à l'utilisation incorrecte des attributs d'identifiant HTML et aux limitations inhérentes du sélecteur d'identifiant jQuery.

Validation HTML

Selon les spécifications HTML, chaque élément d'un document doit avoir un identifiant unique. valeur de l'attribut id. L'utilisation du même identifiant pour plusieurs éléments rend le code HTML invalide. Par conséquent, le code HTML suivant, qui comprend trois boutons avec un ID identique ("xyz"), est incorrect :

<button>

Comportement du sélecteur jQuery

Le sélecteur d'ID jQuery (#id) est conçu pour cibler un seul élément en fonction de son identifiant unique. Lorsque plusieurs éléments partagent le même ID, le sélecteur sélectionne uniquement le premier élément correspondant selon les spécifications HTML. Par conséquent, le script jQuery suivant, qui tente de récupérer la valeur de chaque bouton lors d'un clic, ne fonctionnera que pour le premier bouton :

$("#xyz").click(function() {
  var xyz = $(this).val();
  alert(xyz);
});

Solution

Pour remédier à ce problème et s'assurer que chaque fonctionnalité du bouton, le code HTML doit être modifié pour remplacer les attributs id par des attributs de classe. Cela permet à plusieurs éléments de partager la même classe sans enfreindre les normes HTML :

<button class="xyz" value="1">XYZ1</button>
<button class="xyz" value="2">XYZ2</button>
<button class="xyz" value="3">XYZ3</button>

Le script jQuery correspondant doit être mis à jour comme suit pour cibler tous les éléments avec la classe "xyz" :

$(".xyz").click(function() {
  alert(this.value);
});

Conclusion

En employant ces modifications, vous pouvez vous assurer que tous les boutons avec la classe « xyz » répondent aux événements de clic, éliminant ainsi le problème précédent où seul le premier bouton était fonctionnel. Cette approche adhère aux normes de validation HTML et exploite la flexibilité des sélecteurs de classe jQuery pour obtenir le comportement souhaité.

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!