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

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


当前回答

这对于更改dom上的元素非常有用,但在将html字符串传递到jquery时不适用,如下所示:

$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();

经过一些操作后,我创建了一个函数,该函数允许以上内容在ie中用于html字符串:

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

其他回答

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

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

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

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

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

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

这就是你想要的吗?

为了真正实现jQuery风格,您可能希望outerHTML()是一个getter和setter,并且其行为尽可能类似于html():

$.fn.outerHTML = function (arg) {
    var ret;

    // If no items in the collection, return
    if (!this.length)
        return typeof arg == "undefined" ? this : null;
    // Getter overload (no argument passed)
    if (!arg) {
        return this[0].outerHTML || 
            (ret = this.wrap('<div>').parent().html(), this.unwrap(), ret);
    }
    // Setter overload
    $.each(this, function (i, el) {
        var fnRet, 
            pass = el,
            inOrOut = el.outerHTML ? "outerHTML" : "innerHTML";

        if (!el.outerHTML)
            el = $(el).wrap('<div>').parent()[0];

        if (jQuery.isFunction(arg)) { 
            if ((fnRet = arg.call(pass, i, el[inOrOut])) !== false)
                el[inOrOut] = fnRet;
        }
        else
            el[inOrOut] = arg;

        if (!el.outerHTML)
            $(el).children().unwrap();
    });

    return this;
}

工作演示:http://jsfiddle.net/AndyE/WLKAa/

这允许我们向outerHTML传递一个参数,该参数可以是

一个可取消的函数-函数(index,oldOuterHTML){}-,其中返回值将成为元素的新HTML(除非返回false)。字符串,该字符串将被设置为每个元素的HTML。

有关详细信息,请参阅jQuery文档For 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();
};