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

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


当前回答

这里有一个非常优化的jquery outerHTML插件:(http://jsperf.com/outerhtml-vs-jquery-clone-hack/5=>其他两个快速代码片段与FF等浏览器不兼容(11)

(function($) {

  var DIV = document.createElement("div"),
      outerHTML;

  if ('outerHTML' in DIV) {
    outerHTML = function(node) {
      return node.outerHTML;
    };
  } else {
    outerHTML = function(node) {
      var div = DIV.cloneNode();
      div.appendChild(node.cloneNode(true));
      return div.innerHTML;
    };
  }

  $.fn.outerHTML = function() {
    return this.length ? outerHTML(this[0]) : void(0);
  };

})(jQuery);

@安迪E=>我不同意你的看法。outerHMTL不需要getter和setter:jQuery已经给了我们'replaceWith'。。。

@mindsplay=>为什么要加入所有outerHTML?jquery.html只返回FIRST元素的html内容。

(抱歉,没有足够的声誉来撰写评论)

其他回答

另一个类似的解决方案添加了临时DOM对象的remove()。

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

document.querySelector('#selector')

扩展jQuery:

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

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

又短又甜。

[].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, '')

你也可以这样做

document.getElementById(id).outerHTML

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