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

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


当前回答

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

$('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标记,因为它的类型更少,工作方式也相同。

其他回答

这里有一个非常优化的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内容。

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

// no cloning necessary    
var x = $('#xxx').wrapAll('<div></div>').parent().html(); 
alert(x);

在这里摆弄:http://jsfiddle.net/ezmilhouse/Mv76a/

关于:prop('outerHTML')呢?

var outerHTML_text = $('#item-to-be-selected').prop('outerHTML');

要设置:

$('#item-to-be-selected').prop('outerHTML', outerHTML_text);

这对我有用。

PS:这是jQuery1.6中添加的。

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

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

也就是说,您还可以迭代元素的属性来构造元素的HTML字符串表示。如果jQuery添加一个outerHTML函数,那么很可能就是这样实现的。