полный HTML-код объекта, возвращаемый селектором jQuery

Question

с учетом этого HTML:

<li id="the_list_item"><img src="some_img"></li>

и этот селектор:

$("#the_list_item")

Я хочу получить полный HTML-код из объекта, возвращаемого селектором jQuery.

Использование:

$("#the_list_item").html()

... просто дает мне внутренний html (<img src="some_img"> часть)

Но так как:

$("#the_list_item").attr("id")

дает мне 'the_list_item', это указывает на то, что весь элемент списка действительно включен в возвращаемый объект .. так как мне получить полный код из этого объекта?

Я хочу получить строку: <li id="the_list_item"><img src="some_img"></li> от моего объекта, но не могу найти способ сделать это.

Answer 1

Я не уверен, что это работает, но, возможно, стоит попробовать:

var html = $('#the_list_item')[0].outerHTML;
alert(html);

Answer 2

Один из способов - создать свою собственную обертку:

$("#the_list_item").wrap('<div>').parent().html();

... делай свое дело, затем развернись:

$("#the_list_item").unwrap();

Answer 3

Уходя на случай, если кто-то в наше время все еще ищет это.
Полное решение jQuery:

$('#the_list_item').prop('outerHTML');

Answer 4

Здесь мое решение, jQuery не требуется!

// Get a reference to the element by its ID.
var oEl = document.getElementById('the_list_item');
// Getting the outerHTML of an element:
var sOuterHTML = oEl.outerHTML;
 alert( sOuterHTML );

В качестве альтернативы можно получить ссылку на элемент посредством jQuery, а затем получить externalHTML.

var sOuterHTML = $('#the_list_item')[0].outerHTML;
alert( sOuterHTML );
// or
var  sOuterHTML = $('#the_list_item').get(0).outerHTML;
alert( sOuterHTML );

Answer 5

К сожалению, решение externalHTML (принятое решение выше) не работает для меня в FireFox 9 / Windows 7 / JQuery 1.7 ...

Вот что-то, что сработало для меня, согласно Четан Шастри (ответ выше):

var el = jQuery('#the_list_item').first();
var outerHtml = jQuery('<div>').append(el).html();

Answer 6

В jQuery нет эквивалента "external html", но это может помочь: http://jquery -howto.blogspot.com / 2009/02 / как к получить набитый-HTML-струнной-including.html

Answer 7

Создание нового объекта DOM div и добавление клона div, затем получение содержимого упакованного div и, наконец, удаление созданного объекта DOM.

var html = $('<div>').append($('#the_list_item').clone()).remove().html();

Answer 8

Здесь вы можете найти хорошее решение в виде кода для плагина jQuery outerHtml: http://yelotofu.com/2008/08/jquery-outerhtml/

Answer 9

Вы пробовали $("#the_list_item").parent().html()?

Answer 10

Для этого есть плагины.Просто Google для "JQuery outerhtml".Основная идея большинства из них заключается в клонировании элемента, добавлении его в пустой div и получении html этого div.