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

时间:2015-06-05 07:48:27

标签: javascript jquery visual-studio-2013 intellisense javascript-intellisense

如果要获取整个DOM元素的HTML(包含包装器),可以执行以下操作(如here所述):

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

那么......那是什么?

5 个答案:

答案 0 :(得分:24)

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

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

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

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

答案 1 :(得分:20)

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

this.outerHTML

答案 2 :(得分:5)

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

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

好的,现在我收到你的问题。它应该有效。 您真的需要智能感知来完成这种简单而简单的构造吗?

答案 3 :(得分:1)

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

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

  

工具&gt;选项&gt;文本编辑器&gt; Javascript&gt; IntelliSense&gt;参考

我设置

  

参考小组:&#34;隐含(Web)&#34;

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

答案 4 :(得分:0)

this.outerHTML就足够了。

如果您使用getElementById,则可以使用:

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