Comment récupérer des éléments DOM à partir des sélecteurs jQuery : un guide avec des exemples

Récupération d'éléments DOM à partir de sélecteurs jQuery

De nombreux développeurs rencontrent des difficultés pour récupérer l'élément DOM à partir d'un sélecteur jQuery. Cet article explique comment y parvenir, à l'aide d'exemples concrets.

Dans l'exemple de code fourni, le développeur souhaite accéder à la valeur cochée d'une case à cocher à l'aide d'un véritable élément DOM. L'exemple montre l'utilisation de is(":checked") pour éviter l'accès direct à l'élément DOM. Cependant, cette approche peut ne pas convenir à tous les scénarios.

Obtention de l'élément DOM

Pour obtenir l'élément DOM brut à partir d'un sélecteur jQuery, vous pouvez utiliser l'une de ces approches :

• $("table").get(0)
• $("table")[0]

En utilisant cette technique, vous pouvez accéder au élément DOM réel, qui vous permet de manipuler ses propriétés directement. Cependant, il est recommandé de s'en tenir aux méthodes jQuery autant que possible, car elles offrent une meilleure compatibilité avec le navigateur et une meilleure lisibilité du code.

Exemple de case à cocher revisité

L'exemple de case à cocher fourni peut être réécrit à l'aide des méthodes jQuery, comme indiqué ci-dessous :

$(":checkbox").click(function() {
  if ($(this).is(":checked")) {
    // do stuff
  }
});

Cette approche permet un code plus concis et spécifique à jQuery. Cela inclut également l'utilisation de ceci pour référencer la case à cocher actuelle.

Numérotation des éléments de case à cocher

Pour numéroter les éléments de case à cocher, vous pouvez utiliser le code suivant :

$(":checkbox").each(function(i, elem) {
  $(elem).data("index", i);
});

$(":checkbox").click(function() {
  if ($(this).is(":checked") && $(this).data("index") == 0) {
    // do stuff
  }
});

Cet exemple montre comment parcourir les éléments de case à cocher, en attribuant à chacun un index à l'aide de la méthode $.each() de jQuery. Cela permet une manipulation plus polyvalente des éléments des cases à cocher en fonction de leur ordre numérique.

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!