13

Gdy chcesz uzyskać HTML z całego elementu DOM (wrapper zestawie), można wykonać następujące czynności (jak wyjaśniono here):

$('#myElementId')[0].outerHTML 

ale co ty nie może zrobić to zadzwonić na outerHTML$(this) wewnątrz np zakres słuchacz lub kliknij selektor ciało funkcji:

$(this).outerHTML //Doesn't complete in IntelliSense, returns undefined in browser 

lub

$(this)[0].outerHTML //Correction, this DOES work, but it doesn't complete in IntelliSense 

ponieważ IntelliSense nie pokaże innerHTML lub outerHTML w tych okolicznościach, chociaż z wanilii JavaScript można zrobić:

document.getElementById($(this).attr('id')).outerHTML 

Więc ... co z tym?

+5

Czy rzeczywiście próbowałeś w samej przeglądarce? W szczególności nie widzę sensu używania 'outerHTML', ale to powinno działać. –

+3

Może Intellisense nie jest w stanie stwierdzić, że '$ (this) [0]' jest elementem DOM, więc nie sugeruje członków DOM. –

+0

Pochylając się w kierunku wyjaśnienia @ FrédéricHamidi. Czy otrzymujesz jakąkolwiek intellisense na '$ (this) .get (0) .outerHTML'? –

Odpowiedz

22

outerHTML jest własnością DOM; jQuery nie ujawnia wszystkich właściwości DOM.

Jeśli masz obiekt jQuery, możesz uzyskać bezpośredni dostęp tylko do tych właściwości i metod, które eksponuje jQuery, i na odwrót dla obiektów DOM.

W kategoriach obiektowych obiekty jQuery nie dziedziczą z obiektów DOM, ale zawierają je.

Powiedzenie $x[0] pobiera obiekt DOM dla pierwszego elementu reprezentowanego przez obiekt jQuery.

+3

PYTAJĄCY twierdzą, że Intellisense nie może ukończyć '$ (this) [0] .outerHTML', więc nie jest to tylko problem z elementem jQuery object/DOM. –

+5

@ FrédéricHamidi: Wydaje mi się, że Intellisense nie jest na tyle sprytny, aby stwierdzić, że element dostępowy do tablicy jQuery '[]' zwraca element DOM. – RichieHindle

+0

@ FrédéricHamidi faktycznie * nie * wypełnia '$ (this) [0] .outerHTML' chociaż działa w przeglądarce. –

19

można użyć bezpośrednio this dostęp do outerHTML bieżącego obiektu zamiast pośrednio przeżywa $(this) jak ta reprezentuje obiekt DOM (który ma outerHTML właściwość) natomiast $(this) reprezentuje obiekt jQuery.

this.outerHTML 
4

selektor jQuery zwraca obiekt jQuery podobny do tablicy, który nie ma właściwości outerHTML.

Jednak wynikowa tablica jQuery zawiera elementy DOM.
Oznacza to, że można uzyskać do niego dostęp w ten sposób.

$(".someClass")[0].outerHTML // it works for me 

Aktualizacja: To działa na mnie w każdej przeglądarce.
Mogę uzyskać dostęp do obiektu jQuery podobnego do tablicy w obsłudze zdarzeń kliknięcia.

$(".someClass").click(function() 
{ 
    alert($(this)[0].outerHTML); // it works me too 
}); 

Oto moja JSFiddle: http://jsfiddle.net/13btf60p/

Aktualizacja 2:

OK, teraz mam pytanie. To powinno zadziałać. Czy naprawdę potrzebujesz technologii IntelliSense, aby wykonać tak prostą i prostą konstrukcję?

+5

PO twierdzi, że '$ (this) [0] .outerHTML' również nie działa poprawnie. Fakt, że jQuery zwraca obiekt podobny do tablicy, jest nieistotny. –

+0

@ Qantas94Heavy To działa poprawnie dla mnie w różnych przeglądarkach. Mogę uzyskać dostęp do '$ (this) [0] .outerHTML' na zdarzeniu kliknięcia. –

+2

@YeldarKurmangaliyev ale pytanie jest inne. – Jai

1

Dodam, co uważam za poprawne rozwiązanie tego, co w końcu było zwykłą wadą w domyślnych ustawieniach Visual Studio na przyszłość.

Ponieważ nie chcą odpuszczę, szukałem dalej i okazało się, że domyślnie, jQuery IntelliSense jest dość opłakany wyjęciu z pudełka w Visual Studio 2013.

Pod

Narzędzia> Opcje> Edytor tekstu> JavaScript> IntelliSense> Referencje

ustawić

Grupa odniesienia: "Implicit (Web)"

i dodano istniejący plik jQuery. Rozwiązało to wszystkie problemy mojego pytania, a IntelliSense sugeruje teraz poprawnie wszystkich członków i metody, chociaż powinno to po prostu zadziałać po wyjęciu z pudełka, zamiast kosztować każdego garść czasu.

Powiązane problemy