我试图用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">'
其他回答
如果场景是动态追加新行,则可以使用以下方法:
var row = $(".myRow").last().clone();
$(".myRow").last().after(row);
.myrow是<tr>的类名。它复制最后一行并将其作为新的最后一行插入。这也适用于IE7,而[0].outerHTML方法不允许在IE7中赋值
我使用了Jessica的解决方案(由Josh编辑),使outerHTML在Firefox上运行。然而,问题是我的代码被破坏了,因为她的解决方案将元素包装成DIV。再添加一行代码就解决了这个问题。
下面的代码为您提供了outerHTML,使DOM树保持不变。
$jq.fn.outerHTML = function() {
if ($jq(this).attr('outerHTML'))
return $jq(this).attr('outerHTML');
else
{
var content = $jq(this).wrap('<div></div>').parent().html();
$jq(this).unwrap();
return content;
}
}
并像这样使用:$(“#myDiv”).outerHTML();
希望有人觉得它有用!
你也可以这样做
document.getElementById(id).outerHTML
其中id是要查找的元素的id
你可以在这里找到一个很好的.outerHTML()选项https://github.com/darlesson/jquery-outerhtml.
与仅返回元素的html内容的.html()不同,此版本的.outerHTML()返回所选元素及其html内容,或将其替换为.replaceWith()方法,但不同之处在于,替换的html可以通过链接继承。
示例也可以在上面的URL中看到。
为了真正实现jQuery风格,您可能希望outerHTML()是一个getter和setter,并且其行为尽可能类似于html():
$.fn.outerHTML = function (arg) {
var ret;
// If no items in the collection, return
if (!this.length)
return typeof arg == "undefined" ? this : null;
// Getter overload (no argument passed)
if (!arg) {
return this[0].outerHTML ||
(ret = this.wrap('<div>').parent().html(), this.unwrap(), ret);
}
// Setter overload
$.each(this, function (i, el) {
var fnRet,
pass = el,
inOrOut = el.outerHTML ? "outerHTML" : "innerHTML";
if (!el.outerHTML)
el = $(el).wrap('<div>').parent()[0];
if (jQuery.isFunction(arg)) {
if ((fnRet = arg.call(pass, i, el[inOrOut])) !== false)
el[inOrOut] = fnRet;
}
else
el[inOrOut] = arg;
if (!el.outerHTML)
$(el).children().unwrap();
});
return this;
}
工作演示:http://jsfiddle.net/AndyE/WLKAa/
这允许我们向outerHTML传递一个参数,该参数可以是
一个可取消的函数-函数(index,oldOuterHTML){}-,其中返回值将成为元素的新HTML(除非返回false)。字符串,该字符串将被设置为每个元素的HTML。
有关详细信息,请参阅jQuery文档For html.()。