你为什么不能在$（this）上调用outerHTML？

Question

When you want to get the HTML of an entire DOM element (wrapper included), you can do the following (as explained here ):

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

But what you can't do is call outerHTML on $(this) inside eg a click listener or selector function body scope:

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

or

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

because IntelliSense won't show innerHTML or outerHTML in those circumstances, although with vanilla JavaScript you can do:

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

So... what's up with that?

Answer 1

outerHTML is a DOM property; jQuery doesn't expose all DOM properties.

If you have a jQuery object, you can only directly access those properties and methods that jQuery exposes, and vice versa for DOM objects.

In object-oriented terms, jQuery objects don't inherit from DOM objects, they contain them.

Saying $x[0] gets you the DOM object for the first element represented by a jQuery object.

Answer 2

您可以直接使用this来访问当前对象的outerHTML ，而不是间接通过$(this)因为它表示DOM对象（具有outerHTML属性），而$(this)表示jQuery对象。

this.outerHTML

Answer 3

jQuery selector returns an array-like jQuery object which has no outerHTML property.

However, the jQuery resulting array contains DOM elements.
It means that you can actually access it this way.

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

Update: It works for me in every browser.
I can access array-like jQuery object in a click event handler as well.

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

Here is my JSFiddle: http://jsfiddle.net/13btf60p/

Update 2:

OK, now I get your question. It should have worked. Do you really need an IntelliSense to complete such a plain and simple construction?

Answer 4

I will add what I found to be the correct solution to what ended up being a simple flaw in the default Visual Studio settings for future reference.

Since I didn't want to let this go, I searched further and found out that, by default, jQuery IntelliSense is somewhat deplorable out of the box in Visual Studio 2013.

Under

Tools > Options > Text Editor > Javascript > IntelliSense > References

I set

Reference Group: "Implicit (Web)"

and added an existing jQuery file. This solved all issues of my question and IntelliSense now suggests all members and methods correctly, although this should have simply worked out of the box instead of costing everyone a bunch of time.

Answer 5

this.outerHTML is enough.

If you use getElementById maybe you can use:

var table = document.getElementById('blablabla');