我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
当前回答
简单的解决方案。
var myself = $('#div').children().parent();
其他回答
$("#myNode").parent(x).html();
其中“x”是节点号,以0开头作为第一个节点,如果要获取特定的节点,则应获取所需的正确节点。如果你有子节点,你应该在你想要的节点上加上一个ID,这样你就可以把它归零了。使用这种方法,没有“x”对我来说很好。
node.cloneNode()几乎不像黑客。您可以克隆节点并将其附加到任何所需的父元素,也可以通过操作单个财产来操作它,而不必在其上运行正则表达式,或者将其添加到DOM中,然后在后面操作它。
也就是说,您还可以迭代元素的属性来构造元素的HTML字符串表示。如果jQuery添加一个outerHTML函数,那么很可能就是这样实现的。
$("#myTable").parent().html();
也许我没有正确理解您的问题,但这将获得所选元素的父元素的html。
这就是你想要的吗?
这里有一个非常优化的jquery outerHTML插件:(http://jsperf.com/outerhtml-vs-jquery-clone-hack/5=>其他两个快速代码片段与FF等浏览器不兼容(11)
(function($) {
var DIV = document.createElement("div"),
outerHTML;
if ('outerHTML' in DIV) {
outerHTML = function(node) {
return node.outerHTML;
};
} else {
outerHTML = function(node) {
var div = DIV.cloneNode();
div.appendChild(node.cloneNode(true));
return div.innerHTML;
};
}
$.fn.outerHTML = function() {
return this.length ? outerHTML(this[0]) : void(0);
};
})(jQuery);
@安迪E=>我不同意你的看法。outerHMTL不需要getter和setter:jQuery已经给了我们'replaceWith'。。。
@mindsplay=>为什么要加入所有outerHTML?jquery.html只返回FIRST元素的html内容。
(抱歉,没有足够的声誉来撰写评论)
我使用了Jessica的解决方案(由Josh编辑),使outerHTML在Firefox上运行。然而,问题是我的代码被破坏了,因为她的解决方案将元素包装成DIV。再添加一行代码就解决了这个问题。
下面的代码为您提供了outerHTML,使DOM树保持不变。
$jq.fn.outerHTML = function() {
if ($jq(this).attr('outerHTML'))
return $jq(this).attr('outerHTML');
else
{
var content = $jq(this).wrap('<div></div>').parent().html();
$jq(this).unwrap();
return content;
}
}
并像这样使用:$(“#myDiv”).outerHTML();
希望有人觉得它有用!