web-dev-qa-db-fra.com

Comment obtenir un élément DOM à partir d'un sélecteur JQuery

J'ai beaucoup de mal à trouver le DOMElement réel à partir d'un sélecteur JQuery. Exemple de code:

<input type="checkbox" id="bob" />
  var checkbox = $("#bob").click(function() { //some code  } )

et dans un autre morceau de code, j'essaie de déterminer la valeur cochée de la case à cocher.

  if ( checkbox.eq(0).SomeMethodToGetARealDomElement().checked )
    //do something.

Et s'il vous plaît, je ne veux pas faire:

  if ( checkbox.eq(0).is(":checked"))
    //do something

Cela me fait cocher la case, mais d’autres fois, j’ai eu besoin du vrai DOMElement.

javascriptjquerydom
168
BillRob

Vous pouvez accéder à l'élément DOM brut avec:

$("table").get(0);

ou plus simplement:

$("table")[0];

En réalité, il n’ya pas grand-chose dont vous avez besoin (selon mon expérience). Prenez votre exemple de case à cocher:

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

est plus "jquery'ish" et (à mon humble avis) plus concis. Et si vous vouliez les numéroter?

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

Certaines de ces fonctionnalités permettent également de masquer les différences entre les navigateurs. Certains attributs peuvent être différents. L'exemple classique est AJAX appels. Pour faire cela correctement en Javascript brut, il y a environ 7 cas de repli pour XmlHttpRequest.

259
cletus

Edit: semble que je me suis trompé en supposant que vous ne puissiez pas obtenir l'élément. Comme d'autres l'ont posté ici, vous pouvez l'obtenir avec:

$('#element').get(0);

J'ai vérifié que cela renvoie effectivement l'élément DOM qui a été mis en correspondance.

7
eduncan911

Je devais obtenir l'élément sous forme de chaîne.

jQuery("#bob").get(0).outerHTML;

Ce qui vous donnera quelque chose comme:

<input type="text" id="bob" value="hello world" />

... en tant que chaîne plutôt qu'en tant qu'élément DOM.

6
Chad Hedgcock

Si vous avez besoin d’interagir directement avec l’élément DOM, pourquoi ne pas simplement utiliser document.getElementById puisque, si vous essayez d’interagir avec un élément spécifique, vous connaîtrez probablement l’id, en supposant que le nom de la classe ne figure que sur un seul élément ou une autre option a tendance à être risquée.

Mais, j'ai tendance à être d'accord avec les autres, que dans la plupart des cas, vous devriez apprendre à faire ce dont vous avez besoin en utilisant ce que jQuery vous donne, car il est très flexible.

UPDATE: Basé sur un commentaire: Voici un article avec une explication intéressante: http://www.mail-archive.com/ [email protected]/msg04461.html

$(this).attr("checked") ? $(this).val() : 0

Cela retournera la valeur si elle est cochée ou 0 si ce n'est pas le cas.

$(this).val() est juste en train d'atteindre le dom et d'obtenir l'attribut "value" de l'élément, qu'il soit ou non coché.

1
James Black