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

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


当前回答

$.html=el=>$(“<div>”+el+“</div>”).html().trim();

其他回答

请注意,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的解决方案解决了另一个问题,请参见上面的评论。

$("#myTable").parent().html();

也许我没有正确理解您的问题,但这将获得所选元素的父元素的html。

这就是你想要的吗?

你也可以这样做

document.getElementById(id).outerHTML

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

2014年编辑:问题和此回复来自2010年。当时,还没有更好的解决方案。现在,许多其他回复都更好:比如埃里克·胡(Eric Hu)的回复,或者雷·卡查(Re Capcha)的回复。

本网站似乎为您提供了一个解决方案:jQuery:outerHTML|Yelotofu

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};

如果场景是动态追加新行,则可以使用以下方法:

var row = $(".myRow").last().clone();
$(".myRow").last().after(row);

.myrow是<tr>的类名。它复制最后一行并将其作为新的最后一行插入。这也适用于IE7,而[0].outerHTML方法不允许在IE7中赋值