Pourquoi le sélecteur d'ID de jQuery ne fonctionne-t-il qu'avec le premier élément lorsque plusieurs éléments partagent le même ID ?

Comportement du sélecteur d'ID jQuery avec plusieurs identifiants identiques

Lorsque vous travaillez avec jQuery, vous pouvez rencontrer un problème où le sélecteur d'ID ($(" #xyz")) semble récupérer uniquement la valeur du premier élément correspondant. Ce comportement peut être déroutant et frustrant, surtout lorsque vous vous attendez à ce qu'il fonctionne pour tous les éléments avec le même ID.

Le code HTML avec des identifiants identiques

Considérez ce qui suit Code HTML, qui attribue à tort le même identifiant ("xyz") à trois boutons :

<button>

Le jQuery Code

Vous pouvez essayer le code jQuery suivant pour récupérer la valeur du bouton cliqué :

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

Pourquoi cela ne fonctionne que pour le premier bouton

Dans ce cas, le code jQuery ne fonctionnera que pour le premier bouton. Le sélecteur d'ID jQuery est conçu pour sélectionner le premier élément qui correspond à l'ID spécifié. Étant donné que l'ID "xyz" est répété plusieurs fois, il ne renvoie que le premier.

Invalidité HTML et solution

Ce comportement met en évidence l'importance de garantir un code HTML valide. code. Selon les spécifications HTML, chaque valeur d'ID doit être unique au sein d'un document. Avoir plusieurs éléments avec le même ID n'est pas valide et doit être évité.

Pour corriger le problème, remplacez l'ID par un attribut de classe pour chaque bouton :

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

JQuery mis à jour Code

Pour récupérer la valeur du bouton cliqué à l'aide du code HTML mis à jour, utilisez la classe sélecteur :

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

Remarque : Dans ce code révisé, il n'est pas nécessaire d'envelopper le mot-clé "this" avec $(), car il s'agit déjà d'un objet JavaScript natif.

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!