JQuery создать вкладку проблемы с контентом

Question

Идея состоит в том, чтобы переписать оригинальный HTML (на лету) и создать вместо него контент с вкладками. Итак, скажем, у нас есть что-то вроде:

<div id="tabber">
<h1>Tab one</h1>
...HTML text 1...
<h1>Tab two</h1>
...HTML text 2...
<h1>Tab three</h1>
...HTML text 3...
</div>

Приведенный выше код должен иметь вид:

<div id="tabber">
<ul>
<li class="tabbertab">Tab one</li>
<li class="tabbertab">Tab two</li>
<li class="tabbertab">Tab three</li>
</ul>
<div class="tabberdiv">...HTML text 1...</div>
<div class="tabberdiv">...HTML text 2...</div>
<div class="tabberdiv">...HTML text 3...</div>
</div>

Итак, я попытался использовать что-то вроде этого, чтобы превратить все H1 в ярлыки вкладок и содержимое между следующим H1 в содержимое табуляции:

var menu_items = [];
var all_content = jQuery( '#tabber' ).html();
jQuery( all_content )
    .filter( 'h1' )
    .each( function() {
        menu_items.push( {
            title: jQuery( this ).text(),
            contents: jQuery( this ).nextUntil( 'h1' ).map( function() {
                return jQuery( this ).html();
            } ).get()
        } );
    } );

... больше кода фактически разделит объекты, сохраненные в массиве menu_items, и создаст интерактивные вкладки, которые должны показывать (скрывать) соответствующий контент.

Проблема заключается в том, что все "основные" теги HTML извлекаются из содержимого tabberdiv DIV. Например, H2, TABLE, UL, P, DIV ... ничего из этого не существует, если используется. Тем не менее, A, LI, TR, TD все еще там.

Мне было интересно, что может быть не так с приведенным выше фрагментом кода jQuery, функция которого вызывает исчезновение элементов HTML.

Заранее спасибо!

========== Чуть позже ==========

По какой-то причине функция html() удаляет все родительские узлы. Я не эксперт по jQuery, и я думаю, для этого должна быть причина. В любом случае, простой обходной путь будет следующим:

jQuery( all_content )
    .filter( 'h1' )
    .each( function() {
        menu_items.push( {
            title: jQuery( this ).text(),
            contents: jQuery( this ).nextUntil( 'h1' ).map( function() {
                return '<' + this.nodeName.toLowerCase() + '>' + jQuery( this ).html() + '</' + this.nodeName.toLowerCase() + '>';
            } ).get()
        } );
} );