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