Holt das äußere HTML des ausgewählten Elements

Question

Ich versuche, die HTML eines ausgewählten Objekts mit jQuery zu erhalten. Ich bin mir bewusst, dass die .html() Funktion; das Problem ist, dass ich das HTML einschließlich des ausgewählten Objekts benötige (in diesem Fall eine Tabellenzeile, in der .html() gibt nur die Zellen innerhalb der Zeile zurück).

Ich habe herum gesucht und fand ein paar sehr "hackish" Art Methoden der Klonen eines Objekts, fügen Sie es zu einem neu erstellten div, etc, etc, aber dies scheint wirklich schmutzig. Gibt es einen besseren Weg, oder bietet die neue Version von jQuery (1.4.2) irgendeine Art von outerHtml Funktionalität?

Answer 1

Ich stimme Arpan (13. Dezember '10 5:59) zu.

Seine Art, es zu tun, ist eigentlich eine viel bessere Art, es zu tun, wie Sie nicht verwenden, klonen. Die Klon-Methode ist sehr zeitaufwendig, wenn Sie Kind-Elemente haben, und niemand sonst schien sich darum zu kümmern, dass IE tatsächlich die outerHTML Attribut (ja, der IE hat tatsächlich einige nützliche Tricks in petto).

Aber ich würde sein Drehbuch wahrscheinlich ein bisschen anders gestalten:

$.fn.outerHTML = function() {
    var $t = $(this);
    if ($t[0].outerHTML !== undefined) {
        return $t[0].outerHTML;
    } else {
        var content = $t.wrap('<div/>').parent().html();
        $t.unwrap();
        return content;
    }
};

Answer 2

Um wirklich jQuery-esque zu sein, sollten Sie vielleicht outerHTML() ein Getter zu sein und ein Setter und sein Verhalten ist ähnlich wie bei html() wie möglich:

$.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;
}

Arbeits-Demo: http://jsfiddle.net/AndyE/WLKAa/

Dies ermöglicht es uns, ein Argument an outerHTML die sein können

• eine stornierbare Funktion - function (index, oldOuterHTML) { } - wobei der Rückgabewert der neue HTML-Code für das Element wird (es sei denn false zurückgegeben wird).
• eine Zeichenkette, die an die Stelle des HTML-Werts jedes Elements gesetzt wird.

Weitere Informationen finden Sie in den jQuery-Dokumenten für html() .

Answer 3

Sie können auch Folgendes verwenden erhalten. (Ruft die DOM-Elemente ab, die mit dem jQuery-Objekt übereinstimmen.).

z.B.:

$('div').get(0).outerHTML;//return "<div></div>"

Als Erweiterungsmethode :

jQuery.fn.outerHTML = function () {
  return this.get().map(function (v) {
    return v.outerHTML
  }).join()
};

Oder

jQuery.fn.outerHTML = function () {
  return $.map(this.get(), function (v) {
    return v.outerHTML
  }).join()
};

Mehrfachauswahl und Rückgabe der äußeren html aller übereinstimmenden Elemente.

$('input').outerHTML()

Rückkehr:

'<input id="input1" type="text"><input id="input2" type="text">'

Answer 4

Um ein FULL jQuery Plugin zu erstellen als .outerHTML Fügen Sie das folgende Skript in eine beliebige js-Datei ein und fügen Sie es nach jQuery in Ihren Header ein:

_Update Die neue Version bietet eine bessere Kontrolle sowie einen jQuery Selector-freundlicheren Service! :)

;(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);

Dies ermöglicht es Ihnen, nicht nur die outerHTML eines Elements, sondern sogar ein Array Rückkehr von mehreren Elementen auf einmal! und kann sowohl in jQuery Standard-Stile als solche verwendet werden:

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

Für mehrere Elemente

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

Schnipsel-Beispiele:

console.log('$.outerHTML($("#eleID"))'+"\t", $.outerHTML($("#eleID"))); 
console.log('$("#eleID").outerHTML()'+"\t\t", $("#eleID").outerHTML());
console.log('$("#firstEle, .someElesByClassname, tag").outerHTML()'+"\t", $("#firstEle, .someElesByClassname, tag").outerHTML());

var checkThisOut = $("div").outerHTML();
console.log('var checkThisOut = $("div").outerHTML();'+"\t\t", checkThisOut);
$.each(checkThisOut, function(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">This will</div>
<div id="firstEle">be Replaced</div>
<div class="someElesByClassname">At RunTime</div>
<h3><tag>Open Console to see results</tag></h3>

Answer 5

Sie können es auch einfach so machen

document.getElementById(id).outerHTML

wobei id die id des gesuchten Elements ist