我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
当前回答
你可以在这里找到一个很好的.outerHTML()选项https://github.com/darlesson/jquery-outerhtml.
与仅返回元素的html内容的.html()不同,此版本的.outerHTML()返回所选元素及其html内容,或将其替换为.replaceWith()方法,但不同之处在于,替换的html可以通过链接继承。
示例也可以在上面的URL中看到。
其他回答
你也可以这样做
document.getElementById(id).outerHTML
其中id是要查找的元素的id
$("#myTable").parent().html();
也许我没有正确理解您的问题,但这将获得所选元素的父元素的html。
这就是你想要的吗?
为了真正实现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.()。
又短又甜。
[].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, '')
请注意,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的解决方案解决了另一个问题,请参见上面的评论。