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

Question

当你想要得到的HTML整个DOM元素(包括包装),你可以做以下(如解释在这里):

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

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

那么......那是什么呢？

Answer 1

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

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

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

Saying为$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来完成这种简单而简单的构造吗？