获取所选元素的外部HTML

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

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

当前回答

扩展jQuery：

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

并像这样使用：$（“#myTableRow”）.outerHTML（）；

其他回答

jQuery插件作为直接获取整个元素HTML的速记：

jQuery.fn.outerHTML = function () {
    return jQuery('<div />').append(this.eq(0).clone()).html();
};

并像这样使用：$（“.element”）.outerHTML（）；

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

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

这就是你想要的吗？

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();
};

$.html=el=>$（“<div>”+el+“</div>”）.html（）.trim（）；

还可以使用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()
};

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">'

推荐文章