Jak uzyskać element DOM z Selektora JQuery


179

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.


4
Jeden przypadek, w którym może to być potrzebne: w Knockout.js funkcja applyBindingsoczekuje, że węzeł DOM nie będzie selektorem jQuery. To pytanie (i odpowiedzi) jest dokładnie tym, czego potrzeba.
Muhammad Alkarouri

Odpowiedzi:


264

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.


1
Dzięki, ale metoda get nadal zwraca element jquery, a nie element dom. W przeciwnym razie zadziałałoby wywołanie właściwości .checked.
BillRob,

Spróbuj $('a').get(0).nodeType==1w Firebug na tej stronie, czy to prawda, czy nie?
meder omuraliev

@BillRob, jeśli get () nie zwraca elementu DOM, coś jest nie tak. Zobacz dokumenty tutaj: docs.jquery.com/Core/get#index
Sixten Otto,

$('<input type=checkbox>').appendTo('body').get(0).checked
meder omuraliev

5
Po co używać jQuery, jeśli zamierzasz jawnie używać właściwości DOM? Czy nie lepiej mieć spójny kod, który jest odporny na błędy w stosunku do możliwych błędów TypeErrors? Kilka lat temu byłem elitarnym ECMAScripter i unikałem frameworków, ale im więcej dowiedziałem się o niespójnościach, w końcu polegałem bardziej. Silniki przeglądarek stają się coraz szybsze, chyba że prędkość jest zauważalna, nie powinieneś się tym martwić. Cały sens korzystania z frameworka polega na tym, aby działający spójny kod mógł rozwiązać wiele problemów, a nie robić rzeczy tak szybko, jak to możliwe.
meder omuraliev

7

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.


2
Powtarzam się, ale znowu ... nie we wszystkich przeglądarkach. Nie działa w IE7 i wcześniejszych wersjach.
Slavo,

6

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.


1

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/jquery-en@googlegroups.com/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.


2
Mógłbym użyć metody document.getElementById lub MS ajax $ get. Od czasu, gdy MS poparło jquery, próbuję przerwać moje poleganie na javascript ms ajax i nauczyć się jquery. Wydaje się całkowicie sprzeczne z intuicją, że jquery zmieniłoby zachowanie metody checkbox .val (). Jak każde inne wywołanie .val () zwraca pola formularza post. Praca z jQuery była tak dobra, że ​​zmieszanie metody val () było mylące i liczyłem na szybkie obejście tego problemu.
BillRob,


2
Dziwne, James, że metoda val () jest naprawdę .attr („wartość”). Zastanawiam się, dlaczego mają dwie różne metody. Dla mnie .val () jest wartością pola formularza post.
BillRob,

2
@BillRob - jQuery po prostu upraszcza i standaryzuje sposób uzyskiwania wartości, zamiast konieczności przechodzenia do rzeczywistego elementu i robienia tego sam.
James Black

Czasami potrzebujesz złożonego selektora z identyfikatorami i scenariusza nadrzędny-podrzędny i możesz to zrobić przez jQuery za pomocą jednego wiersza kodu, ale użycie dokumentu.getElementById zajęłoby dzień. Zgadzam się, że mieszanie bibliotek jest złym pomysłem, ale zdarza się to czasami, a zadanie uzyskania elementu DOM z obiektu jquery jest po prostu trudne, szczególnie, gdy .get (0) nie ma kompatybilności z przeglądarką.
Slavo,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.