我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
当前回答
我同意Arpan的观点(2010年12月13日5:59)。
他的做法实际上是更好的做法,因为你不用克隆。如果您有子元素,克隆方法非常耗时,而且其他人似乎都不关心IE是否具有outerHTML属性(是的,IE实际上有一些有用的技巧)。
但我可能会创作一个有点不同的剧本:
$.fn.outerHTML = function() {
var $t = $(this);
if ($t[0].outerHTML !== undefined) {
return $t[0].outerHTML;
} else {
var content = $t.wrap('<div/>').parent().html();
$t.unwrap();
return content;
}
};
其他回答
请注意,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的解决方案(由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();
希望有人觉得它有用!
这对于更改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();
};
另一个类似的解决方案添加了临时DOM对象的remove()。
如果场景是动态追加新行,则可以使用以下方法:
var row = $(".myRow").last().clone();
$(".myRow").last().after(row);
.myrow是<tr>的类名。它复制最后一行并将其作为新的最后一行插入。这也适用于IE7,而[0].outerHTML方法不允许在IE7中赋值