Jak uzyskać element DOM z selektora JQuery

Question

Mam niewiarygodne trudności ze znalezieniem rzeczywistego DOMElement z selektora jquery. Przykładowy kod:

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

iw innym kawałku kodu próbuję określić zaznaczoną wartość pola wyboru.

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

I proszę, nie chcę zrobić:

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

To ja się wokół wyboru, ale czasami mam potrzebne prawdziwe DOMElement.

Answer 1

Możesz uzyskać dostęp do elementu DOM z surowego:

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

lub prościej:

$("table")[0]; 

Nie ma rzeczywiście dużo trzeba jednak za to (w moim doświadczeniu). Weź przykład z pola wyboru:

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

jest bardziej "jquery'ish" i (imho) bardziej zwięzły. Co jeśli chcesz je policzyć?

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

Niektóre z tych funkcji pomagają również maskować różnice w przeglądarkach. Niektóre atrybuty mogą być różne. Klasycznym przykładem są połączenia AJAX. Aby to zrobić poprawnie w surowym języku Javascript, ma około 7 przypadków zastępczych dla XmlHttpRequest.

Answer 2

Jeśli potrzebujesz interakcji bezpośrednio z elementem DOM, to dlaczego nie po prostu użyć document.getElementById, ponieważ jeśli próbujesz wejść w interakcję z konkretnym elementem, prawdopodobnie znasz identyfikator, zakładając, że nazwa klasy znajduje się tylko na jednym elemencie lub inna opcja może być ryzykowna.

Ale, zgadzam się z innymi, że w większości przypadków powinieneś nauczyć się robić to, czego potrzebujesz, używając jQuery, ponieważ jest bardzo elastyczny.

UPDATE: Na podstawie komentarza: Oto post z ładnym wyjaśnienia: http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

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

ta zwróci wartość, jeśli jest zaznaczone, lub 0 jeśli nie jest.

$(this).val() dopiero sięga po dom i otrzymuje atrybut "wartość" elementu, niezależnie od tego, czy jest zaznaczony.

Answer 3

Edycja: wydaje się, że nie miałem racji zakładając, że nie można uzyskać elementu. Jak napisali tutaj inni, możesz to uzyskać:

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

Zweryfikowałem, że faktycznie zwraca element DOM, który został dopasowany.

Answer 4

Potrzebowałem uzyskać element jako ciąg.

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

które dadzą ci coś takiego:

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

... jako ciąg znaków, a nie elementu DOM.