我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
当前回答
还可以使用get(检索jQuery对象匹配的DOM元素)。
e.g:
$('div').get(0).outerHTML;//return "<div></div>"
作为扩展方法:
jQuery.fn.outerHTML = function () {
return this.get().map(function (v) {
return v.outerHTML
}).join()
};
Or
jQuery.fn.outerHTML = function () {
return $.map(this.get(), function (v) {
return v.outerHTML
}).join()
};
多选并返回所有匹配元素的外部html。
$('input').outerHTML()
返回:
'<input id="input1" type="text"><input id="input2" type="text">'
其他回答
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();
};
我相信目前(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发布
使用普通JavaScript非常简单。。。
document.querySelector('#selector')
请注意,Josh的解决方案仅适用于单个元素。
可以说,“外部”HTML只有在只有一个元素时才真正有意义,但在某些情况下,将HTML元素列表并将其转换为标记是有意义的。
扩展Josh的解决方案,此解决方案将处理多个元素:
(function($) {
$.fn.outerHTML = function() {
var $this = $(this);
if ($this.length>1)
return $.map($this, function(el){ return $(el).outerHTML(); }).join('');
return $this.clone().wrap('<div/>').parent().html();
}
})(jQuery);
编辑:Josh的解决方案解决了另一个问题,请参见上面的评论。
我使用了Jessica更新的Volomike解决方案。只是添加了一个检查以查看元素是否存在,并使其返回空白以防不存在。
jQuery.fn.outerHTML = function() {
return $(this).length > 0 ? $(this).clone().wrap('<div />').parent().html() : '';
};
当然,可以这样使用:
$('table#buttons').outerHTML();