Próbuję pobrać HTML wybranego obiektu za pomocą jQuery. Jestem świadomy tej .html()funkcji; Problemem jest to, że potrzebuję kodu HTML zawierającego wybrany obiekt (w tym przypadku wiersz tabeli, w którym .html()zwracane są tylko komórki wewnątrz wiersza).

Szukałem wokoło i znalazłem kilka bardzo „hackerskich” metod klonowania obiektu, dodawania go do nowo utworzonego pliku div itp., Ale wydaje się to naprawdę brudne. Czy jest jakiś lepszy sposób, czy też nowa wersja jQuery (1.4.2) oferuje jakąkolwiek outerHtmlfunkcjonalność?

Edycja 2014: Pytanie i ta odpowiedź pochodzą z 2010 roku. W tym czasie żadne lepsze rozwiązanie nie było powszechnie dostępne. Teraz wiele innych odpowiedzi jest lepszych: na przykład Eric Hu lub Re Capcha.

Ta witryna wydaje się mieć dla Ciebie rozwiązanie: jQuery: outerHTML | Yelotofu

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};

Uważam, że obecnie (5/1/2012) wszystkie główne przeglądarki obsługują funkcję outerHTML. Wydaje mi się, że ten fragment jest wystarczający. Osobiście wolałbym zapamiętać to:

// Gives you the DOM element without the outside wrapper you want
$('.classSelector').html()

// Gives you the outside wrapper as well only for the first element
$('.classSelector')[0].outerHTML

// Gives you the outer HTML for all the selected elements
var html = '';
$('.classSelector').each(function () {
    html += this.outerHTML;
});

//Or if you need a one liner for the previous code
$('.classSelector').get().map(function(v){return v.outerHTML}).join('');

EDYCJA : Podstawowe statystyki wsparcia dlaelement.outerHTML

• Firefox (Gecko): 11 .... Wydany 13.03.2012
• Chrome: 0.2 ............... Wydany 2008-09-02
• Internet Explorer 4.0 ... Wydany w 1997 roku
• Opera 7 ...................... Wydany 28.01.2003
• Safari 1.3 ................... Wydany 2006-01-12

Nie ma potrzeby generowania dla niego funkcji. Po prostu zrób to w ten sposób:

$('a').each(function(){
    var s = $(this).clone().wrap('<p>').parent().html();
    console.log(s);
});

(Nawiasem mówiąc, konsola przeglądarki pokaże, co jest zalogowane. Większość najnowszych przeglądarek od około 2009 roku ma tę funkcję.)

Magia jest na końcu:

.clone().wrap('<p>').parent().html();

Klon oznacza, że ​​tak naprawdę nie przeszkadzasz DOM. Uruchom go bez niego, a zobaczysz ptagi wstawione przed / po wszystkich hiperłączach (w tym przykładzie), co jest niepożądane. Tak, użyj .clone().

Działa w ten sposób, że pobiera każdy aznacznik, tworzy jego klon w pamięci RAM, otacza go pznacznikami, pobiera jego element nadrzędny (czyli pznacznik), a następnie pobiera jego innerHTMLwłaściwość.

EDYCJA : Wziąłem porady i zmieniłem divtagi na ptagi, ponieważ mniej piszą i działają tak samo.

Co z prop('outerHTML'):?

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

I ustawić:

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

To zadziałało dla mnie.

PS : Zostało to dodane w jQuery 1.6 .

Rozszerz jQuery:

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

I użyj tego w ten sposób: $("#myTableRow").outerHTML();

Zgadzam się z Arpanem (13 grudnia 2010 r. 5:59).

Jego sposób robienia tego jest w rzeczywistości O wiele lepszym sposobem, ponieważ nie używasz klonowania. Metoda klonowania jest bardzo czasochłonna, jeśli masz elementy potomne, a nikomu innemu wydawało się, że IE NIE MA outerHTMLatrybutu (tak, IE rzeczywiście ma NIEKTÓRE przydatne sztuczki).

Ale prawdopodobnie stworzyłbym jego skrypt nieco inaczej:

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

Aby być naprawdę jQuery-esque, możesz chcieć outerHTML()być pobierającym i ustawiającym, a jego zachowanie powinno być html()jak najbardziej podobne:

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

Działające demo: http://jsfiddle.net/AndyE/WLKAa/

To pozwala nam przekazać argument outerHTML, który może być

• funkcja anulowalna - function (index, oldOuterHTML) { }- gdzie zwracana wartość stanie się nowym HTML dla elementu (chyba że falsezostanie zwrócona).
• ciąg znaków, który zostanie ustawiony zamiast kodu HTML każdego elementu.

Aby uzyskać więcej informacji, zobacz dokumentację jQuery dla html().

Możesz także użyć get ( pobierz elementy DOM pasujące do obiektu jQuery.).

na przykład:

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

Jako metoda rozszerzenia:

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

Lub

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

Wielokrotny wybór i zwrot zewnętrznego HTML wszystkich dopasowanych elementów.

$('input').outerHTML()

powrót:

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

Aby utworzyć PEŁNĄ wtyczkę jQuery jako .outerHTML, dodaj następujący skrypt do dowolnego pliku js i dołącz po jQuery do nagłówka:

_aktualizacja Nowa wersja ma lepszą kontrolę, a także bardziej przyjazną usługę Selector 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);

Umożliwi to nie tylko uzyskanie zewnętrznego HTML jednego elementu, ale nawet powrót tablicy wielu elementów jednocześnie! i mogą być używane jako oba standardowe style jQuery:

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

Dla wielu elementów

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

Przykłady fragmentów:

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>

możesz to po prostu zrobić w ten sposób

document.getElementById(id).outerHTML

gdzie id jest identyfikatorem szukanego elementu

Użyłem rozwiązania Jessiki (które było edytowane przez Josha), aby uzyskać outerHTML do pracy z Firefoksem. Problemem jest jednak to, że mój kod się zepsuł, ponieważ jej rozwiązanie owinęło element w DIV. Dodanie jeszcze jednej linii kodu rozwiązało ten problem.

Poniższy kod daje zewnętrzny HTML, pozostawiając drzewo DOM bez zmian.

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

I użyj tego w następujący sposób: $ ("# myDiv"). OuterHTML ();

Mam nadzieję, że ktoś uzna to za przydatne!

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

Fiddle tutaj: http://jsfiddle.net/ezmilhouse/Mv76a/

Jeśli scenariusz dynamicznie dodaje nowy wiersz, możesz użyć tego:

var row = $(".myRow").last().clone();
$(".myRow").last().after(row);

.myrowjest nazwą klasy <tr>. Tworzy kopię ostatniego wiersza i wstawia jako nowy ostatni wiersz. Działa to również w IE7 , podczas gdy [0].outerHTMLmetoda nie pozwala na przypisania w ie7

node.cloneNode () prawie nie wygląda na włamanie. Możesz sklonować węzeł i dołączyć go do dowolnego pożądanego elementu nadrzędnego, a także manipulować nim poprzez manipulowanie poszczególnymi właściwościami, zamiast konieczności np. Uruchamiania na nim wyrażeń regularnych lub dodawania go do DOM, a następnie manipulowania nim po słowie.

To powiedziawszy, możesz także iterować atrybuty elementu, aby utworzyć jego reprezentację ciągu HTML. Wydaje się prawdopodobne, że w ten sposób zaimplementowano by dowolną funkcję outerHTML, gdyby jQuery ją dodał.

Użyłem rozwiązania Volomike zaktualizowanego przez Jessicę. Właśnie dodałam sprawdzenie, czy element istnieje, i sprawił, że zwrócił pusty, na wypadek, gdyby nie istniał.

jQuery.fn.outerHTML = function() {
return $(this).length > 0 ? $(this).clone().wrap('<div />').parent().html() : '';
};

Oczywiście używaj go w następujący sposób:

$('table#buttons').outerHTML();

Dobrą opcję .outerHTML () można znaleźć tutaj https://github.com/darlesson/jquery-outerhtml .

W przeciwieństwie do .html (), który zwraca tylko treść HTML elementu, ta wersja .outerHTML () zwraca wybrany element i jego zawartość HTML lub zastępuje go jako metodę .replaceWith (), ale z tą różnicą, że dziedziczenie zastępującego HTML może być dziedziczone przez łańcuchy.

Przykłady można również zobaczyć w powyższym adresie URL.

Zauważ, że rozwiązanie Josha działa tylko dla jednego elementu.

Prawdopodobnie „zewnętrzny” HTML ma sens tylko wtedy, gdy masz jeden element, ale są sytuacje, w których warto wziąć listę elementów HTML i zamienić je w znaczniki.

Rozszerzając rozwiązanie Josha, ten będzie obsługiwał wiele elementów:

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

Edycja: kolejny problem z rozwiązaniem Josha, patrz komentarz powyżej.

Inne rozwiązanie z dodanym remove()tymczasowym obiektem DOM.

Zrobiłem ten prosty test, w którym outerHTML jest rozwiązaniem tokimon (bez klonu), a outerHTML2 jest rozwiązaniem jessica (klon)

console.time("outerHTML");
for(i=0;i<1000;i++)
 {                 
  var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML();
 }                 
console.timeEnd("outerHTML");

console.time("outerHTML2");

 for(i=0;i<1000;i++)
 {                 
   var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML2();
  }                 
  console.timeEnd("outerHTML2");

i wynik w mojej przeglądarce Chrome (wersja 20.0.1132.57 (0)) był

outerHTML: 81ms
outerHTML2: 439ms

ale jeśli użyjemy rozwiązania tokimon bez natywnej funkcji outerHTML (która jest teraz obsługiwana prawdopodobnie w prawie każdej przeglądarce)

dostajemy

outerHTML: 594ms
outerHTML2: 332ms

w przykładach z prawdziwego świata będzie więcej pętli i elementów, więc idealna kombinacja byłaby

$.fn.outerHTML = function() 
{
  $t = $(this);
  if( "outerHTML" in $t[0] ) return $t[0].outerHTML; 
  else return $t.clone().wrap('<p>').parent().html(); 
}

więc metoda klonowania jest w rzeczywistości szybsza niż metoda zawijania / rozpakowywania
(jquery 1.7.2)

Oto bardzo zoptymalizowana zewnętrzna wtyczka HTMLH dla jquery: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => 2 inne fragmenty szybkiego kodu nie są kompatybilne z niektórymi przeglądarkami, takimi jak 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);

@Andy E => Nie zgadzam się z tobą. outerHMTL nie potrzebuje gettera ORAZ setera: jQuery już daje nam „replaceWith” ...

@mindplay => Dlaczego dołączasz do wszystkich outerHTML? jquery.html zwraca tylko treść HTML pierwszego elementu.

(Przepraszamy, nie mam wystarczającej reputacji, aby pisać komentarze)

Krótkie i słodkie.

[].reduce($('.x'), function(i,v) {return i+v.outerHTML}, '')

lub wydarzenie bardziej słodkie za pomocą funkcji strzałek

[].reduce.call($('.x'), (i,v) => i+v.outerHTML, '')

lub w ogóle bez jQuery

[].reduce.call(document.querySelectorAll('.x'), (i,v) => i+v.outerHTML, '')

lub jeśli nie podoba ci się to podejście, sprawdź to

$('.x').get().reduce((i,v) => i+v.outerHTML, '')

To jest dość proste z waniliowym JavaScript ...

document.querySelector('#selector')

Jest to świetne do zmiany elementów w dom, ale NIE działa np. Przy przekazywaniu łańcucha html do jquery w następujący sposób:

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

Po pewnych manipulacjach stworzyłem funkcję, która pozwala na działanie powyższego, tj. Dla ciągów HTML:

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

$.html = el => $("<div>"+el+"</div>").html().trim();

Natknąłem się na to, szukając odpowiedzi na mój problem, który polegał na tym, że próbowałem usunąć wiersz tabeli, a następnie dodać go z powrotem na dole tabeli (ponieważ dynamicznie tworzyłem wiersze danych, ale chciałem wyświetlić komunikat „Dodaj nowy” Zapisz wiersz typu na dole).

Miałem ten sam problem, ponieważ zwracał on wewnętrzny plik HTML, więc brakowało znaczników TR, które zawierały identyfikator tego wiersza i uniemożliwiały powtórzenie procedury.

Znalazłem odpowiedź, że remove()funkcja jquery faktycznie zwraca element, który usuwa, jako obiekt. Tak więc usunięcie i ponowne dodanie wiersza było tak proste, jak to ...

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

Jeśli nie usuwasz obiektu, ale chcesz go skopiować gdzie indziej, użyj clone()funkcji.

Wtyczka jQuery jako skrót do bezpośredniego pobrania całego elementu HTML:

jQuery.fn.outerHTML = function () {
    return jQuery('<div />').append(this.eq(0).clone()).html();
};

I użyj tego w ten sposób: $(".element").outerHTML();

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

Gdzie „x” to numer węzła, zaczynając od 0 jako pierwszy, powinien uzyskać odpowiedni węzeł, jeśli chcesz uzyskać konkretny. Jeśli masz węzły potomne, naprawdę powinieneś umieszczać identyfikator na tym, który chcesz, aby go po prostu wyzerować. Korzystanie z tej metodologii i brak „x” działało dla mnie dobrze.

Proste rozwiązanie.

var myself = $('#div').children().parent();

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

Być może nie rozumiem poprawnie twojego pytania, ale otrzyma html elementu nadrzędnego wybranego elementu.

Czy o to ci chodzi?