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

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

如果要获取整个DOM元素的HTML(包含包装器),可以执行以下操作(如此处所述):

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

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

但你不能做的是在$(this)内部调用outerHTML,例如单击侦听器或选择器函数体范围:

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

$(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:

因为IntelliSense在这些情况下不会显示innerHTML或outerHTML,尽管使用vanilla JavaScript可以做到:

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

So... what's up with that?

那么......那是怎么回事?

4 个解决方案

#1

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

outerHTML是一个DOM属性; jQuery不公开所有DOM属性。

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

如果你有一个jQuery对象,你只能直接访问jQuery公开的那些属性和方法,反之亦然。

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

在面向对象的术语中,jQuery对象不从DOM对象继承,它们包含它们。

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

说$ x [0]可以获得jQuery对象表示的第一个元素的DOM对象。

#2

You can use directly this to access outerHTML of the current object instead of indirectly going through $(this) as this represents the DOM object (which has outerHTML property) whereas $(this) represents jQuery object.

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

this.outerHTML

#3

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

jQuery选择器返回一个类似于数组的jQuery对象,该对象没有outerHTML属性。

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

但是,jQuery结果数组包含DOM元素。这意味着您可以通过这种方式实际访问它。

$(".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.

更新:它适用于每个浏览器。我也可以在click事件处理程序中访问类似数组的jQuery对象。

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

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

这是我的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?

好的,现在我收到你的问题。它应该有效。您真的需要智能感知来完成这种简单而简单的构造吗?

#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.

我将添加我发现的正确解决方案,最终成为默认Visual Studio设置中的一个简单缺陷,以供将来参考。

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.

由于我不想放弃这一点,我进一步搜索并发现,默认情况下,jQuery IntelliSense在Visual Studio 2013中有点令人遗憾。

Under

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

工具>选项>文本编辑器> Javascript> IntelliSense>参考

I set

Reference Group: "Implicit (Web)"

参考小组:“隐含(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.

并添加了一个现有的jQuery文件。这解决了我的问题的所有问题,IntelliSense现在正确地建议所有成员和方法,虽然这应该只是开箱即用而不是花费大量时间。

#1