2013-04-02 9 views
11

Mam program, który przypisuje zmiennej jako:Jquery selektorów nie działają na przypisanie elementu DOM zmiennej

var theList = document.getElementById('theList'); 

używa jQuery, ale jeśli piszę to tak:

var theList = $('#theList'); 

funkcja, która używa tej zmiennej, nie działa.

Czym różni się selektor jquery i używanie getElementById?

+1

Chciałbyś użyć 'theList = $ ('# theList') [0]' lub 'theList = $ ('# theList'). Get (0)'. – zzzzBov

Odpowiedz

1

Pierwszy element theList jest elementem DOM; drugie theList (które byłoby idealnie napisane jako $theList) jest jQuery object. Twoja funkcja najwyraźniej oczekuje tego pierwszego, a nie drugiego.

17

document.getElementById zwraca macierzysty obiekt DOM Element, z bezpośrednim dostępem do właściwości tego węzła.

Funkcje jQuery zamiast zwracają "kolekcje jQuery", tj. Obiekt jQuery z powiązanym zestawem funkcji/wtyczek itp., Który działa jak tablica węzłów DOM.

powszechnie uznawany powtarzała były od niego jest prefiks zmienne zawierające drugi ze $:

Aby wyodrębnić poszczególne elementy z kolekcji jQuery jako węzły DOM, użyć .get(n) lub [n].

var $theList = $('#theList'); // jQuery collection 
var theList = $theList[0];  // DOM node 
var theList = $theList.get(0); // also a DOM node 

Atrybut i mienia dostęp zależy od tego, czy masz kolekcję jQuery czy nie:

var id = $theList.attr('id'); // jQuery function 
var id = theList.id;   // native property 
+0

Po wyszukaniu "elementu DOM a obiektu jQuery" natknąłem się na ten http://stackoverflow.com/questions/6974582/jquery-object-and-dom-element i ustaliłem, że odpowiednik jquery var theList = document.getElementById (' Lista'); będzie var theList = $ ("# theList").get (0); – user1469779

+0

@ user1469779 tak, to mówi bardzo podobnie. – Alnitak

+0

Dokładnie kod podałem w moim pytaniu do konwersji. Dobrze, że udało Ci się zrobić edycję, by uwzględnić proces konwersji. – TheManWithNoName

0

to dlatego $ ('# thelist') zwraca obiekt jQuery, a nie obiektu DOM. Obiekty JQuery nie mają tych samych właściwości, co właściwości elementu/węzła Javascript.

-1

Standardowa funkcja getElementByID zwraca odwołanie do JavaScript elementu DOM, natomiast funkcja jQuery zwraca obiekt jQuery (który zawiera strukturę podobną do tablicy odwołań do zera lub więcej odwołań JavaScript do elementów DOM).

aby były one zgodne można użyć:

var theList = $('#theList').get(0); 

NB: Edited by pomóc w utrzymaniu pokoju na świecie i poprawić mój pośpiesznie wpisane terminologia że komentujących były szybkie podkreślić.

+0

nie, to naprawdę nie jest "tablica obiektów jQuery". Jest to pojedynczy obiekt jQuery z zestawem indeksowanych numerycznie właściwości reprezentujących poszczególne elementy DOM w tym zbiorze. – Alnitak

+0

To nie jest "obiekt JavaScript", to element DOM. jQuery nie tworzy tablicy, chociaż jest to tablica (http://stackoverflow.com/a/11886626/497418). – zzzzBov

+0

Zależy od tego, jak na to patrzysz. Obiekt jQuery zawiera strukturę list poszczególnych obiektów lub odnosi się do pojedynczego obiektu jQuery, jeśli selektor zwróci tylko jeden element. Jeśli zrobisz jQuery ("wszystko"), nie otrzymasz jednego obiektu oprócz listy obiektów. – TheManWithNoName

0

getElementById Funkcja zwraca pierwszy element o podanym id, gdzie selektor jquery zwraca obiekt znany jako "zestaw owinięty". Możesz użyć funkcji each do iteracji i wywołania swojej funkcji.

Zobacz ten artykuł: http://www.devx.com/codemag/Article/40923.

Powiązane problemy