jQueryを使用して、見出しに基づいてメニュー/コンテンツを自動生成するにはどうすればよいですか？

Question

いくつかの情報が含まれている基本的なXHTML文書では、セクションの「クイックジャンプ」タイプのメニューを使用して、関連するセクションにすばやく移動できるようにしたいと考えています。

これは静的なXHTMLドキュメントです。そのため、すべての動的な処理をサーバーではなくブラウザで行う必要があります。私はjQueryが行く方法だと考えました。

私はjQuery UIのものを見てきましたが、アコーディオンは私が見つけることのできる最も近いものですが、セクションを崩壊させたくありません - すべてのコンテンツが表示され、フローティングのコンテンツ/メニューが必要です。このことから

：

<h2>Section 1</h2> 
<p>Some information</p> 
<h2>Section 2</h2> 
<p>More great info</p> 

私のような何かを生成したい：私はクラスまたは類似したとのdiv内の個々のセクションを包む気にしない

<ul id="menu"> 
    <li><a href="#section1">First section</a></li> 
    <li><a href="#section2">Another section</a></li> 
</ul> 
<a name="section1"><h2>First section</h2></a> 
<p>Some information</p> 
<a name="section2"><h2>Another section</h2></a> 
<p>More great info</p> 

を、だろうができるだけ自動化されたプロセスのように、私はドキュメントを修正するときに実際のコンテンツを変更するだけです。

アイデア？

おかげで、F.

Answer 1

あなただけ自動的にあなたができるラッパーを作成するために、関数を呼び出すことができるようにしたい場合は、このような何か：

<ul id="menu"></ul> 
<div id="sectionInfo"></div> 

function addSection(name, anchor, info) { 
    $("#menu").append("<li><a href='" + anchor+ "'>" + name + "</a></li>"); 
    $("#sectionInfo").append("<a name='" + anchor + "'><h2>" + name + "</h2></a><p>" + info + "</p>"); 
} 

HTMLのセクションのコンテナを定義します関数自体は、必要なラッパーを含むコンテンツを追加します。これは単純なテキストではうまくいくはずですが、セクション情報にHTMLが含まれていてもちょっと混乱することがあります。その場合は、セクションとその情報をデータベースに格納する方法を検討してください。

使用法：

addSection("First section", "section1", "Some information with great content"); 

編集

それがこの「addSection」機能、オートコールにロードされるときには、ドキュメントを横断するために、これを拡張することができます。

より厳密な構造でセクションを定義する必要がありますので、トラバースが簡単です。私はこのようなものをお勧めしたい：

ページがロードされると、その後

<ul id="menu"></ul> 
<div id="content"></div> 

<div id='sections' style='display:none;'> 
    <div> 
     <h2>Section 1</h2> 
     <p>Some information</p> 
    </div> 
    <div> 
     <h2>Section 2</h2> 
     <p>More great info</p> 
    </div> 
</div> 

、と定義されたセクションをループあなたはそれが見えるようにしたい、これまで何に自分のコンテンツを変換addSection（）を呼び出す：

<script> 
    $(document).ready(function() { 
     $("#sections div").each(function() { 
      addSection($(this).find("h2").first().html(), $(this).find("p").first().html()); 
     }); 
    }); 

    function addSection(name, info) { 
     var anchor = name.replace(/ /g,''); 
     $("#menu").append("<li><a href='" + anchor+ "'>" + name + "</a></li>"); 
     $("#content").append("<a name='" + anchor + "'><h2>" + name + "</h2></a><p>" + info + "</p>"); 
    } 
</script> 

を

このコードはテストされていませんが、このコンセプトは機能するはずです。 HTMLをコピーするのではなく、要素を移動することで効率を上げることができます。

Answer 2

セレクタの結果に基づいてコンテンツを生成するJavaScriptを探しているような感じです。どちらか、達成するために派手な何かを必要としない：

function buildSectionAnchorElement(index, heading) { 
 
    var a = $("<a>"); 
 
    var name = "section" + index; 
 
    $(heading).attr("name", name); 
 
    a.attr("href", "#"+name); 
 
    a.text($(heading).text()); 
 
    return a; 
 
} 
 
var headings = $("h1,h2,h3,h4"); 
 
var sections = headings.map(function(i,e) { 
 
    var a = buildSectionAnchorElement(i,e); 
 
    var p = $(e).next("p"); 
 
    var li = $("<li>"); 
 
    li.append(a); 
 
    $("#menu").append(li); 
 
    return li; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="menu"></ul> 
 

 
<h2>something special</h2> 
 
<p>lorem ipsum</p> 
 

 
<h2>different thing</h2> 
 
<p>dolor kismet aha bwaha</p>