我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
当前回答
我使用了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();
希望有人觉得它有用!
其他回答
我做了这个简单的测试,outerHTML是tokimon解决方案(没有克隆),outerHTML2是jessica解决方案(克隆)
console.time("outerHTML");
for(i=0;i<1000;i++)
{
var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML();
}
console.timeEnd("outerHTML");
console.time("outerHTML2");
for(i=0;i<1000;i++)
{
var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML2();
}
console.timeEnd("outerHTML2");
在我的chromium(版本20.0.1132.57(0))浏览器中的结果是
outerHTML:81ms外部HTML2:439ms
但是如果我们使用tokimon解决方案而不使用本机outerHTML函数(现在几乎每个浏览器都支持该函数)
我们得到
outerHTML:594ms外部HTML2:332ms
在现实世界的例子中会有更多的循环和元素,所以完美的组合应该是
$.fn.outerHTML = function()
{
$t = $(this);
if( "outerHTML" in $t[0] ) return $t[0].outerHTML;
else return $t.clone().wrap('<p>').parent().html();
}
所以clone方法实际上比wrap/unwrap方法更快(jquery 1.7.2)
我使用了Jessica更新的Volomike解决方案。只是添加了一个检查以查看元素是否存在,并使其返回空白以防不存在。
jQuery.fn.outerHTML = function() {
return $(this).length > 0 ? $(this).clone().wrap('<div />').parent().html() : '';
};
当然,可以这样使用:
$('table#buttons').outerHTML();
又短又甜。
[].reduce($('.x'), function(i,v) {return i+v.outerHTML}, '')
或借助箭头功能更甜蜜的事件
[].reduce.call($('.x'), (i,v) => i+v.outerHTML, '')
或者根本没有jQuery
[].reduce.call(document.querySelectorAll('.x'), (i,v) => i+v.outerHTML, '')
或者如果你不喜欢这种方法,检查一下
$('.x').get().reduce((i,v) => i+v.outerHTML, '')
如果场景是动态追加新行,则可以使用以下方法:
var row = $(".myRow").last().clone();
$(".myRow").last().after(row);
.myrow是<tr>的类名。它复制最后一行并将其作为新的最后一行插入。这也适用于IE7,而[0].outerHTML方法不允许在IE7中赋值
你可以在这里找到一个很好的.outerHTML()选项https://github.com/darlesson/jquery-outerhtml.
与仅返回元素的html内容的.html()不同,此版本的.outerHTML()返回所选元素及其html内容,或将其替换为.replaceWith()方法,但不同之处在于,替换的html可以通过链接继承。
示例也可以在上面的URL中看到。