Jak uzyskać element DOM z Selektora JQuery

Mam niemożliwie trudny moment, aby dowiedzieć się, jak uzyskać rzeczywistą DOMElement z selektora jquery. Przykładowy kod:

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

i w innym fragmencie kodu próbuję ustalić sprawdzoną wartość pola wyboru.

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

I proszę, nie chcę robić:

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

To mnie kręci wokół pola wyboru, ale innym razem potrzebowałem prawdziwego DOMElement.

Możesz uzyskać dostęp do surowego elementu DOM za pomocą:

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

lub prościej:

$("table")[0];

Jednak tak naprawdę nie jest to potrzebne (z mojego doświadczenia). 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 ponumerować?

$(":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ą się różnić. Klasycznym przykładem są wywołania AJAX. Aby zrobić to poprawnie w surowym JavaScript, ma około 7 rezerwowych przypadków XmlHttpRequest.

Edycja: wygląda na to, że pomyliłem się, zakładając, że nie można uzyskać elementu. Jak napisali tutaj inni, możesz to uzyskać za pomocą:

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

Zweryfikowałem, że faktycznie zwraca dopasowany element DOM.

Musiałem uzyskać element jako ciąg.

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

Co da ci coś takiego:

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

... jako ciąg zamiast elementu DOM.

Jeśli potrzebujesz bezpośredniej interakcji z elementem DOM, dlaczego po prostu nie użyć document.getElementById ponieważ, jeśli próbujesz wejść w interakcję z konkretnym elementem, prawdopodobnie znasz identyfikator, ponieważ zakładając, że nazwa klasy jest tylko na jednym elemencie, lub inna opcja ma tendencję do ryzykować.

Ale zazwyczaj zgadzam się z innymi, że w większości przypadków powinieneś nauczyć się robić to, czego potrzebujesz, korzystając z tego, co daje ci jQuery, ponieważ jest to bardzo elastyczne.

AKTUALIZACJA: Na podstawie komentarza: Oto post z dobrym wyjaśnieniem: http://www.mail-archive.com/[email protected]/msg04461.html

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

Zwróci wartość, jeśli jest zaznaczona, lub 0, jeśli nie jest.

$(this).val() po prostu sięga do domu i otrzymuje atrybut „wartość” elementu, niezależnie od tego, czy jest zaznaczony.