我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。

我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?


当前回答

node.cloneNode()几乎不像黑客。您可以克隆节点并将其附加到任何所需的父元素,也可以通过操作单个财产来操作它,而不必在其上运行正则表达式,或者将其添加到DOM中,然后在后面操作它。

也就是说,您还可以迭代元素的属性来构造元素的HTML字符串表示。如果jQuery添加一个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发布

无需为其生成函数。只需这样做:

$('a').each(function(){
    var s = $(this).clone().wrap('<p>').parent().html();
    console.log(s);
});

(顺便说一下,您的浏览器控制台将显示记录的内容。自2009年以来,大多数最新的浏览器都具有此功能。)

神奇的是:

.clone().wrap('<p>').parent().html();

克隆意味着您实际上没有干扰DOM。在没有它的情况下运行它,您将看到在所有超链接之前/之后插入p个标记(在本例中),这是不可取的。所以,是的,使用.clone()。

它的工作方式是,它获取每个一个标记,在RAM中克隆它,用p个标记包装,获取它的父标记(即p标记),然后获取它的innerHTML属性。

编辑:听取了建议,将div标记更改为p标记,因为它的类型更少,工作方式也相同。

你也可以这样做

document.getElementById(id).outerHTML

其中id是要查找的元素的id

扩展jQuery:

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  };
})(jQuery);

并像这样使用:$(“#myTableRow”).outerHTML();

使用普通JavaScript非常简单。。。

document.querySelector('#selector')