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

Question

当您想获取整个DOM元素（包括包装器）的HTML时，可以按照以下步骤进行操作（如此处所述）：

$('#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，尽管使用原始的 JavaScript 你可以这样做：

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

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

- Wim Ombelets

---

你是否真的在浏览器中尝试过？我不是特别理解为什么要那样使用 outerHTML，但那应该可以工作。 - Qantas 94 Heavy

也许Intellisense无法确定$(this)[0]是一个DOM元素，因此它不会建议DOM成员。 - Frédéric Hamidi

倾向于@FrédéricHamidi的解释。您在$(this).get(0).outerHTML上获得任何智能感知吗？ - Jordan Gray

@JordanGray 不，我不会。 - Wim Ombelets

哎呀，有趣，我以为那会起作用！你在使用 .get 方法时有获取到自动补全提示吗？（我尝试复现了一下，但和你得到的结果不同。） - Jordan Gray

Answer 1

outerHTML 是一个DOM属性；jQuery不会暴露所有的DOM属性。

如果你有一个jQuery对象，你只能直接访问那些由jQuery暴露出来的属性和方法。同样道理，对于DOM对象也是如此。

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

说 $x[0] 会得到一个jQuery对象中表示第一个元素的DOM对象。

- RichieHindle

---

提问者说Intellisense无法完成$(this)[0].outerHTML，因此这不仅涉及jQuery对象 / DOM元素的问题。 - Frédéric Hamidi

我猜Intellisense还不够聪明，无法确定jQuery对象的数组访问器[]返回一个DOM元素。 - RichieHindle

@FrédéricHamidi，它实际上并没有完成$(this)[0].outerHTML，尽管在浏览器中可以工作。 - Wim Ombelets

@Wim，是的，这就是我说的 :) 我们中的一些人认为这是Intellisense的限制。无论如何，this.outerHTML和$(this)[0].outerHTML都可以按预期工作，即使Intellisense显然无法推断出来。 - Frédéric Hamidi

感谢大家的见解和及时的回答！ - Wim Ombelets

智能感应问题在很大程度上取决于你使用的智能感应工具。例如，我发现VisualStudio中内置的js智能感应非常糟糕。在像js这样的非编译语言中信任智能感应总是会有失误和偏差的。 - Liam

Answer 2

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

this.outerHTML

- Adil

Answer 3

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

然而，jQuery返回的数组包含DOM元素。
这意味着你可以通过以下方式访问它。

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

更新： 在每个浏览器中都可以正常工作。 我也可以在单击事件处理程序中访问类似数组的jQuery对象。

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

这是我的JSFiddle：http://jsfiddle.net/13btf60p/

更新2：

好的，现在我明白你的问题了。它应该可以工作。 你真的需要一个智能感知来完成这样一个简单的结构吗？

- Yeldar Kurmangaliyev

---

楼主声称$(this)[0].outerHTML也无法正常工作。jQuery返回类似数组的对象这一事实并不重要。 - Qantas 94 Heavy

@Qantas94Heavy，我在不同的浏览器中测试了一下，它对我来说正常工作。我可以在点击事件中访问$(this)[0].outerHTML。 - Yeldar Kurmangaliyev

你会惊讶于自己对Intellisense的依赖程度，甚至在它失灵时，你会怀疑任何事情（即使是显而易见的）。我浪费了很多时间，因为我相信某些东西应该可以工作，尽管Intellisense不会给我提供选项，只是发现VS需要重新启动或清除Intellisense缓存才能正常工作。有时候这会动摇你的信心。 - Wim Ombelets

Answer 4

我会将我发现的正确解决方案添加到默认的Visual Studio设置中，以备日后参考。

由于我不想放弃，所以我继续搜索并发现，Visual Studio 2013默认情况下，jQuery IntelliSense有些糟糕。

在“工具>选项>文本编辑器>JavaScript>IntelliSense>引用”下，我设置了“隐式（Web）”引用组，并添加了一个现有的jQuery文件。这解决了我所有问题，IntelliSense现在正确地建议所有成员和方法，尽管这应该只是开箱即用，而不是浪费大家的时间。

- Wim Ombelets

Answer 5

this.outerHTML就足够了。

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

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

- Ali Özyıldırım