15

当您想要获取整个 DOM 元素(包括包装器)的HTML时,可以执行以下操作(如此所述):

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

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

$(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 不会显示innerHTMLouterHTML在这些情况下,尽管使用vanilla JavaScript您可以执行以下操作:

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

那么……这是怎么回事?

4

5 回答 5

24

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

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

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

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

于 2015-06-05T07:51:53.310 回答
20

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

this.outerHTML
于 2015-06-05T07:49:44.830 回答
5

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

但是,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:

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

于 2015-06-05T07:51:43.587 回答
1

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

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

在下面

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

我设置

参考组:“隐式(Web)”

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

于 2015-06-06T13:50:53.293 回答
0

this.outerHTML足够的。

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

var table = document.getElementById('blablabla');
于 2019-03-27T07:34:50.173 回答