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 permet de contourner la case à cocher, mais d'autres fois, j'ai besoin du vrai DOMElement.

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

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

ou plus simplement:

$("table")[0];

Cependant, vous n'en avez pas besoin pour beaucoup (d'après 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 aident également à masquer les différences entre les navigateurs. Certains attributs peuvent être différents. L'exemple classique est les appels AJAX. Pour faire cela correctement en Javascript brut, il y a environ 7 cas de secours pour XmlHttpRequest.

Edit: semble que j'avais tort de supposer que vous ne pouviez 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 réellement l'élément DOM correspondant.

J'avais besoin d'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" />

... comme une chaîne plutôt qu'un élément DOM.

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

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.

MISE À JOUR: Basé sur un commentaire: Voici un article avec une belle explication: http://www.mail-archive.com/[email protected]/msg04461.html

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

Cela renverra 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 "valeur" de l'élément, qu'il soit vérifié ou non.