我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
当前回答
$("#myTable").parent().html();
也许我没有正确理解您的问题,但这将获得所选元素的父元素的html。
这就是你想要的吗?
其他回答
这对于更改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();
};
jQuery插件作为直接获取整个元素HTML的速记:
jQuery.fn.outerHTML = function () {
return jQuery('<div />').append(this.eq(0).clone()).html();
};
并像这样使用:$(“.element”).outerHTML();
我相信目前(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')
还可以使用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">'