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

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


当前回答

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

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

其他回答

我在寻找问题的答案时遇到了这个问题,我试图删除一个表行,然后将其添加回表的底部(因为我正在动态创建数据行,但希望在底部显示“添加新记录”类型的行)。

我也有同样的问题,因为它正在返回innerHtml,因此缺少TR标记,该标记保存了该行的ID,这意味着不可能重复该过程。

我发现的答案是jquery remove()函数实际上返回了它删除的元素作为对象。所以,要删除并重新添加一行,就这么简单。。。

var a = $("#trRowToRemove").remove();            
$('#tblMyTable').append(a);  

如果您没有删除该对象,但希望将其复制到其他地方,请改用clone()函数。

这对于更改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();
};
$("#myTable").parent().html();

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

这就是你想要的吗?

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

Or

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

我使用了Jessica的解决方案(由Josh编辑),使outerHTML在Firefox上运行。然而,问题是我的代码被破坏了,因为她的解决方案将元素包装成DIV。再添加一行代码就解决了这个问题。

下面的代码为您提供了outerHTML,使DOM树保持不变。

$jq.fn.outerHTML = function() {
    if ($jq(this).attr('outerHTML'))
        return $jq(this).attr('outerHTML');
    else
    {
    var content = $jq(this).wrap('<div></div>').parent().html();
        $jq(this).unwrap();
        return content;
    }
}

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

希望有人觉得它有用!