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

【问题标题】：Why can't you call outerHTML on $(this)?为什么不能在 $(this) 上调用 outerHTML？
【发布时间】：2015-08-20 02:03:11
【问题描述】：

当您想要获取整个 DOM 元素（包括包装器）的 HTML 时，可以执行以下操作（如 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

那么...这是怎么回事？

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

提问者确实说 Intellisense 无法完成 $(this)[0].outerHTML，所以这不仅仅是一个 jQuery 对象/DOM 元素问题。
@FrédéricHamidi：我猜 Intellisense 不够聪明，无法确定 jQuery 对象的数组访问器 [] 返回一个 DOM 元素。
@FrédéricHamidi 它实际上不完成$(this)[0].outerHTML 尽管它在浏览器中工作。
@Wim，是的，我就是这么说的 :) 我们中的一些人认为这是 Intellisense 的限制。在任何情况下，this.outerHTML 和 $(this)[0].outerHTML 都将按预期工作，即使 Intellisense 显然无法推断。
智能感知问题很大程度上取决于你使用什么智能感知，例如我发现 VisualStudio 中内置的智能感知在 js 中很糟糕。在非编译语言（如 js）中信任智能感知总是会受到打击。

【解决方案2】：

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

this.outerHTML

【讨论】：

【解决方案3】：

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

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

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

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

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

更新 2：

好的，现在我明白你的问题了。它应该起作用了。您真的需要 IntelliSense 来完成如此简单明了的构造吗？

【讨论】：

OP 声称$(this)[0].outerHTML 也无法正常工作。 jQuery 返回一个类似数组的对象这一事实是无关紧要的。
@Qantas94Heavy 它适用于我在不同的浏览器中。我可以在点击事件中访问$(this)[0].outerHTML。
您对智能感知的依赖程度令人难以置信，以至于当它无法交付时，您会怀疑任何事情（甚至是显而易见的事情）。我在我的生活中浪费了很多时间，我确信某些东西应该可以工作，尽管智能感知不会为我提供选择，只是为了发现 VS 需要重新启动，甚至需要清除智能感知缓存才能再次正常工作。我觉得，有时它会动摇你的信心。

【解决方案4】：

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

由于我不想放弃，我进一步搜索发现，默认情况下，jQuery IntelliSense 在 Visual Studio 2013 中开箱即用有些令人遗憾。

下

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

我设置了

参考组：“隐式（Web）”

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

【讨论】：

【解决方案5】：

this.outerHTML 就够了。

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

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

【讨论】：