我试图用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中看到。