cómo conseguir un elemento DOM de un selector de jQuery

Question

estoy teniendo un tiempo increíblemente difícil encontrar a cabo para obtener el DOMElement real de un selector de jQuery. Código de muestra:

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

y en otro fragmento de código Estoy tratando de determinar el valor comprobado de la casilla de verificación.

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

Y por favor, no quiero hacer:

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

Eso me la vuelta de la casilla, pero otras veces que he necesitado la DOMElement real.

Answer 1

Se puede acceder al elemento DOM crudo con:

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

o más simplemente:

$("table")[0]; 

En realidad no hay mucho que necesita esto para sin embargo (en mi experiencia). Tome su ejemplo de casilla de verificación:

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

es más "jquery'ish" y (imho) más conciso. ¿Qué pasaría si quisieras numerarlos?

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

Algunas de estas características también ayudan a ocultar las diferencias en los navegadores. Algunos atributos pueden ser diferentes. El ejemplo clásico son las llamadas AJAX. Para hacer esto correctamente en JavaScript sin procesar tiene aproximadamente 7 casos de respaldo para XmlHttpRequest.

Answer 2

Si necesita interactuar directamente con el elemento DOM, ¿por qué no usar document.getElementById ya que, si está tratando de interactuar con un elemento específico, probablemente conozca la identificación, suponiendo que el nombre de clase está solo en un elemento o alguna otra opción tiende a ser riesgosa.

embargo, tiendo a estar de acuerdo con los otros, que en la mayoría de los casos usted debe aprender a hacer lo que es necesario el uso de jQuery lo que le da, ya que es muy flexible.

ACTUALIZACIÓN: Basado en un comentario: Aquí hay un post con una buena explicación: http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

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

Esto devolverá el valor si está marcada, o 0 si no lo es.

$(this).val() es simplemente metiendo la mano en el DOM y obtener el "valor" atributo del elemento, si es o no está marcada.

Answer 3

Editar: parece que estaba equivocado al suponer que no podía conseguir el elemento. Como otros han dicho aquí, lo puede conseguir con:

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

He verificado esto en realidad devuelve el elemento DOM que fue igualada.

Answer 4

Necesitaba obtener el elemento como una cadena.

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

que le dará algo como:

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

... como una cadena en lugar de un elemento DOM.