Как получить html-строку дочернего тега и родительского тега с помощью jquery?

Например, если у меня есть список HTML ul, например

<ul id="ulIdentificator"> 
    <li id="li0"></li>
    <li id="li1"></li>
    <li id="li2"><label id="label1"></label></li>   
</ul>

Если я использую jQuery, как это

var htmlStr = $("#li2").html();

Результатом будет только строка, содержащая тег метки <LABEL id="label1"></LABEL></li>. Мне нужно получить строку Html, содержащую это <LI id="li2"><LABEL id="label1"></LABEL></LI>


html jquery jquery-selectors
person nemke    schedule 16.12.2009    source источник
comment
Следующий вопрос jquery после вашего был stackoverflow.com/questions/1917040/   -  person Roatin Marth    schedule 16.12.2009

Ответы (3)


arrow_upward
6
arrow_downward

второй метод OuterHTML, о котором упоминает Андрес (из блога веб-архитекторов), работает над все браузеры, так что это, вероятно, лучший выбор. Основная идея заключается в том, что вы можете получить внешний HTML-код элемента, сделав его внутренним HTML-кодом другого элемента:

var outerHtml = $("<div/>").append($("#li2").clone()).html();

Есть только одна небольшая хитрость — убедитесь, что ваш исходный элемент clone не удаляется из DOM.

Если вы делаете это часто или хотите сделать это с массивами элементов, вероятно, стоит следовать приведенному примеру и сделать для этого небольшой плагин.

person Jeff Sternal    schedule 17.12.2009
comment
+1 очень хороший ответ. Но в этот другой вопрос у вас есть та же техника, а также решение проблемы с IFrames. - person Mariano Desanze; 15.03.2011

arrow_upward
1
arrow_downward

Вы также можете написать небольшой плагин jQuery с предложенным методом от Джеффа Стернала:

// jQuery plugin 'htmlWithParent'

jQuery(function($) {

  $.fn.htmlWithParent = function() { return $j("<div/>").append($j(this).clone()).html(); };

});

и используйте этот небольшой плагин cutom, например:

var htmlCode = $("<p><span>Helo world!</span></p>");

// Return only child nodes: <span>Helo world!</span>
var output1 = $(htmlCode).html();

// Return whole HTML code (childs + parent): <p><span>Helo world!</span></p>
var output2 = $(htmlCode).htmlWithParent();

Очень полезный метод. ;)

person Piotr    schedule 11.01.2012
comment
Спасибо. ;) Я всегда делаю небольшие пользовательские плагины jQuery. Меньше кода, больше прозрачности. - person Piotr; 11.01.2012

arrow_upward
0
arrow_downward

jQuery OuterHTML , OuterHTML II

person andres descalzo    schedule 16.12.2009
comment
Техника OuterHTML II настолько проста, что ее стоит воспроизвести в тексте вашего ответа. - person Jeff Sternal; 16.12.2009
comment
Хорошо, это правильный ответ, но я приму его, если вы добавите несколько примеров, а не только две ссылки, чтобы другие ТАК люди могли увидеть это здесь. - person nemke; 16.12.2009