获取所选元素的外部HTML

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我正在尝试使用jQuery获取选定对象的HTML。我知道.html()函数；问题是我需要包含所选对象的HTML（在这种情况下为表格行，其中.html()仅返回行内的单元格）。

我四处搜寻，发现了一些克隆对象，将其添加到新创建的div等中的非常“ hackish”类型的方法，等等，但这似乎很脏。有没有更好的方法，还是新版本的jQuery（1.4.2）提供了任何一种outerHtml功能？

#1楼

$("#myNode").parent(x).html();

其中“ x”是节点号，第一个从0开始，如果您要获取特定的节点号，则应该得到所需的正确节点。如果您有子节点，那么您实际上应该在想要的节点上放置一个ID，而在该节点上仅输入零。使用这种方法，没有“ x”适合我。

#2楼

我认为目前（2012年5月1日），所有主流浏览器都支持externalHTML函数。在我看来，此片段就足够了。我个人会选择记住：

// Gives you the DOM element without the outside wrapper you want
$('.classSelector').html()

// Gives you the outside wrapper as well only for the first element
$('.classSelector')[0].outerHTML

// Gives you the outer HTML for all the selected elements
var html = '';
$('.classSelector').each(function () {
    html += this.outerHTML;
});

//Or if you need a one liner for the previous code
$('.classSelector').get().map(function(v){return v.outerHTML}).join('');

编辑： element.outerHTML 基本支持统计信息

Firefox（Gecko）：11 .... 发布于2012-03-13
Chrome：0.2 ...... 发布于2008-09-02
Internet Explorer 4.0 ... 1997年发布
Opera 7 ............................... 发布2003-01-28
Safari 1.3 ................... 发布2006年1月12日

#3楼

这对于更改dom上的元素非常有用，但不适用于将html字符串像这样传递到jquery中时：

$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();

经过一些操作后，我创建了一个函数，该函数可以使上述功能适用于html字符串：

$.fn.htmlStringOuterHTML = function() {     
    this.parent().find(this).wrap('<div/>');        
    return this.parent().html();
};

#4楼

我已经做了一个简单的测试，其中externalHTML是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");

在我的铬（版本20.0.1132.57（0））浏览器中的结果是

externalHTML：81毫秒
outsideHTML2：439ms

但是，如果我们使用不带本地externalHTML功能的tokimon解决方案（现在几乎所有浏览器都支持该功能）

我们得到

externalHTML：594ms
outsideHTML2：332ms

现实世界中的示例中将会有更多的循环和元素，因此完美的组合将是

$.fn.outerHTML = function() 
{
  $t = $(this);
  if( "outerHTML" in $t[0] ) return $t[0].outerHTML; 
  else return $t.clone().wrap('<p>').parent().html(); 
}

因此克隆方法实际上比包裹/解包裹方法快
（jquery 1.7.2）

#5楼

简单的解决方案。

var myself = $('#div').children().parent();

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3145131

标签

opera

safari

gecko

Chrome

Jessica