为什么不能在 $(this) 上调用 outerHTML？

Question

当你想得到HTML of an entire DOM element (wrapper included), you can do the following (as explained here):

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

但是您不能做的是在 $(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

因为在那种情况下 IntelliSense 不会显示 innerHTML 或 outerHTML，尽管使用 vanilla JavaScript 你可以这样做：

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

所以...这是怎么回事？

Answer 1

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

this.outerHTML

Answer 2

jQuery 选择器 returns 一个类似数组的 jQuery 对象，没有 outerHTML 属性.

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

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

更新： 它适用于所有浏览器。
我也可以在单击事件处理程序中访问类似数组的 jQuery 对象。

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

更新二：

好的，现在我明白你的问题了。它应该有效。这么简单的构造真的需要智能感知吗？

Answer 3

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

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

在面向对象的术语中，jQuery 个对象不是继承自 DOM 个对象，而是包含它们。

说 $x[0] 会为 jQuery 对象表示的第一个元素获取 DOM 对象。

Answer 4

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

因为我不想放过它，所以我进一步搜索发现，默认情况下，jQuery IntelliSense 在 Visual Studio 2013 中开箱即用，有些令人遗憾。

在

下

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

我设置

Reference Group: "Implicit (Web)"

并添加了现有的 jQuery 文件。这解决了我的问题的所有问题，并且 IntelliSense 现在可以正确地建议所有成员和方法，尽管这应该是开箱即用的，而不是花费每个人很多时间。

Answer 5

this.outerHTML 就够了。

如果你使用 getElementById 也许你可以使用：

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

Why can't you call outerHTML on $(this)?