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

Question

当你想要得到的HTML整个DOM元素（包括包装），你可以做以下（如解释在这里 ）：

$('#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

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

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

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

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

Answer 2

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

this.outerHTML

Answer 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
});

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

更新2：

好的，现在我得到你的问题。 它应该有效。 您真的需要IntelliSense来完成这种简单而简单的构造吗？

Answer 4

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

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

下

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

我设置

参考小组：“隐含（Web）”

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

Answer 5

this.outerHTML就足够了。

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

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