我试图用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">'
其他回答
你也可以这样做
document.getElementById(id).outerHTML
其中id是要查找的元素的id
纯JavaScript:
var outerHTML = function(node) {
var div = document.createElement("div");
div.appendChild(node.cloneNode(true));
return div.innerHTML;
};
又短又甜。
[].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, '')
我做了这个简单的测试,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)
这里有一个非常优化的jquery outerHTML插件:(http://jsperf.com/outerhtml-vs-jquery-clone-hack/5=>其他两个快速代码片段与FF等浏览器不兼容(11)
(function($) {
var DIV = document.createElement("div"),
outerHTML;
if ('outerHTML' in DIV) {
outerHTML = function(node) {
return node.outerHTML;
};
} else {
outerHTML = function(node) {
var div = DIV.cloneNode();
div.appendChild(node.cloneNode(true));
return div.innerHTML;
};
}
$.fn.outerHTML = function() {
return this.length ? outerHTML(this[0]) : void(0);
};
})(jQuery);
@安迪E=>我不同意你的看法。outerHMTL不需要getter和setter:jQuery已经给了我们'replaceWith'。。。
@mindsplay=>为什么要加入所有outerHTML?jquery.html只返回FIRST元素的html内容。
(抱歉,没有足够的声誉来撰写评论)