我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
当前回答
使用普通JavaScript非常简单。。。
document.querySelector('#selector')
其他回答
2014年编辑:问题和此回复来自2010年。当时,还没有更好的解决方案。现在,许多其他回复都更好:比如埃里克·胡(Eric Hu)的回复,或者雷·卡查(Re Capcha)的回复。
本网站似乎为您提供了一个解决方案:jQuery:outerHTML|Yelotofu
jQuery.fn.outerHTML = function(s) {
return s
? this.before(s).remove()
: jQuery("<p>").append(this.eq(0).clone()).html();
};
无需为其生成函数。只需这样做:
$('a').each(function(){
var s = $(this).clone().wrap('<p>').parent().html();
console.log(s);
});
(顺便说一下,您的浏览器控制台将显示记录的内容。自2009年以来,大多数最新的浏览器都具有此功能。)
神奇的是:
.clone().wrap('<p>').parent().html();
克隆意味着您实际上没有干扰DOM。在没有它的情况下运行它,您将看到在所有超链接之前/之后插入p个标记(在本例中),这是不可取的。所以,是的,使用.clone()。
它的工作方式是,它获取每个一个标记,在RAM中克隆它,用p个标记包装,获取它的父标记(即p标记),然后获取它的innerHTML属性。
编辑:听取了建议,将div标记更改为p标记,因为它的类型更少,工作方式也相同。
这对于更改dom上的元素非常有用,但在将html字符串传递到jquery时不适用,如下所示:
$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();
经过一些操作后,我创建了一个函数,该函数允许以上内容在ie中用于html字符串:
$.fn.htmlStringOuterHTML = function() {
this.parent().find(this).wrap('<div/>');
return this.parent().html();
};
我相信目前(2012年5月1日),所有主流浏览器都支持outerHTML功能。在我看来,这段话就足够了。我个人会选择记住这一点:
// 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的基本支持统计信息
火狐(壁虎):11。。。。发布日期:2012-03-13铬:0.2…………发布2008-09-02Internet Explorer 4.0…1997年发布歌剧7。。。。。。。。。。。。。。。。。。。。。。发布日期:2003-01-28Safari 1.3…………..2006-01-12发布
我做了这个简单的测试,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)