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

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


当前回答

要将完整的jQuery插件制作为.outerHTML,请将以下脚本添加到任何js文件中,并在jQuery之后包含在头中:

更新新版本有更好的控制,以及更友好的jQuery选择器服务!:)

;(function($) {
    $.extend({
        outerHTML: function() {
            var $ele = arguments[0],
                args = Array.prototype.slice.call(arguments, 1)
            if ($ele && !($ele instanceof jQuery) && (typeof $ele == 'string' || $ele instanceof HTMLCollection || $ele instanceof Array)) $ele = $($ele);
            if ($ele.length) {
                if ($ele.length == 1) return $ele[0].outerHTML;
                else return $.map($("div"), function(ele,i) { return ele.outerHTML; });
            }
            throw new Error("Invalid Selector");
        }
    })
    $.fn.extend({
        outerHTML: function() {
            var args = [this];
            if (arguments.length) for (x in arguments) args.push(arguments[x]);
            return $.outerHTML.apply($, args);
        }
    });
})(jQuery);

这将使您不仅可以获得一个元素的outerHTML,甚至可以同时获得多个元素的Array返回!并且可以在以下两种jQuery标准样式中使用:

$.outerHTML($("#eleID")); // will return outerHTML of that element and is 
// same as
$("#eleID").outerHTML();
// or
$.outerHTML("#eleID");
// or
$.outerHTML(document.getElementById("eleID"));

对于多个元素

$("#firstEle, .someElesByClassname, tag").outerHTML();

代码段示例:

console.log('$.outerHTML($(“#eleID”))'+“\t”,$.outrHTML($”#eleID“)));console.log('$(“#eleID”).outerHTML()'+“\t\t”,$(“#eleID”;console.log('$(“#firstEle,.someElesByClassname,tag”).outerHTML()'+“\t”,$(“#firstEle”,.someElesByClassname,tag“).outrHTML());var checkThisOut=$(“div”).outerHTML();console.log('var checkThisOut=$(“div”).outerHTML();'+“\t\t”,选中ThisOut);$.each(checkThisOut,函数(i,str){$(“div”).eq(i).text(“My outerHTML Was:”+str);});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><script src=“https://rawgit.com/JDMcKinstry/ce699e82c7e07d02bae82e642fb4275f/raw/deabd0663adf0d12f389ddc03786468af4033ad2/jQuery.outerHTML.js“></script><div id=“eleID”>这将</div><div id=“firstEle”>被替换</div><div class=“someElesByClassname”>运行时</div><h3><tag>打开控制台以查看结果</tag></h3>

其他回答

$("#myNode").parent(x).html(); 

其中“x”是节点号,以0开头作为第一个节点,如果要获取特定的节点,则应获取所需的正确节点。如果你有子节点,你应该在你想要的节点上加上一个ID,这样你就可以把它归零了。使用这种方法,没有“x”对我来说很好。

你可以在这里找到一个很好的.outerHTML()选项https://github.com/darlesson/jquery-outerhtml.

与仅返回元素的html内容的.html()不同,此版本的.outerHTML()返回所选元素及其html内容,或将其替换为.replaceWith()方法,但不同之处在于,替换的html可以通过链接继承。

示例也可以在上面的URL中看到。

为了真正实现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.()。

这对于更改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();
};

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

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

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

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

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