So erhalten Sie ein DOM-Element aus einem JQuery-Selektor

Es fällt mir unglaublich schwer, herauszufinden, ob ich das eigentliche DOMElement von einem JQuery-Selektor erhalten kann. Beispielcode:

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

und in einem anderen Code versuche ich, den aktivierten Wert des Kontrollkästchens zu bestimmen.

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

Und bitte, ich möchte nicht tun:

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

Das bringt mich um das Kontrollkästchen, aber manchmal brauchte ich das echte DOMElement.

Sie können auf das unformatierte DOM-Element zugreifen mit:

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

oder einfacher:

$("table")[0];

Es gibt jedoch nicht viel, wofür Sie dies benötigen (meiner Erfahrung nach). Nehmen Sie Ihr Beispiel für ein Kontrollkästchen:

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

ist "jquery'ish" und (imho) prägnanter. Was wäre, wenn Sie sie nummerieren wollten?

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

Einige dieser Funktionen helfen auch dabei, Unterschiede in Browsern zu maskieren. Einige Attribute können unterschiedlich sein. Das klassische Beispiel sind AJAX-Aufrufe. Um dies in rohem Javascript richtig zu machen, gibt es ungefähr 7 Fallback-Fälle für XmlHttpRequest.

Bearbeiten: Anscheinend habe ich mich geirrt, als ich davon ausgegangen bin, dass Sie das Element nicht erhalten konnten. Wie andere hier gepostet haben, können Sie es erhalten mit:

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

Ich habe überprüft, dass dies tatsächlich das übereinstimmende DOM-Element zurückgibt.

Ich musste das Element als Zeichenfolge erhalten.

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

Welches gibt Ihnen so etwas wie:

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

... als Zeichenfolge und nicht als DOM-Element.

Wenn Sie direkt mit dem DOM-Element interagieren müssen, verwenden Sie es einfach document.getElementById Sie es da Sie, wenn Sie versuchen, mit einem bestimmten Element zu interagieren, wahrscheinlich die ID kennen, da davon ausgegangen wird, dass sich der Klassenname nur auf einem Element befindet oder eine andere Option dazu neigt sei riskant.

Aber ich stimme den anderen eher zu, dass Sie in den meisten Fällen lernen sollten, das zu tun, was Sie brauchen, indem Sie das verwenden, was jQuery Ihnen bietet, da es sehr flexibel ist.

UPDATE: Basierend auf einem Kommentar: Hier ist ein Beitrag mit einer schönen Erklärung: http://www.mail-archive.com/[email protected]/msg04461.html

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

Dies gibt den Wert zurück, wenn er aktiviert ist, oder 0, wenn dies nicht der Fall ist.

$(this).val() greift nur in den dom und erhält das Attribut "value" des Elements, unabhängig davon, ob es aktiviert ist oder nicht.