jquery - プラグインなしのjQuerytoc生成

Question

プラグインを使用せずに、jQueryを使用してhtmlドキュメントの親切なtocを生成したいと思います。jQueryのノウハウを学び/改善し始めたところです。

HTML入力：

<div id="toc"></div>
<h3><a name="construction-block"></a>Construction Block</h3><p>...</p>
<h3><a name="construction-box"></a>Construction Box</h3><p>...</p>
...

JS：

$(document).ready(function(){
$("#toc").append('<p>table of contents:</p>');
$("h3").each(function(i) {
    var current = $(this);
    $("#toc").append("<h3>"+current.html()+"</h3>");
});
})

HTML出力

<div id="toc">
<p>table of contents:</p>
<h3>
<a name="construction-block"></a>
Construction Block
</h3>
<h3>
<a name="construction-box"></a>
Construction Boxk
</h3>
</div>

それは部分的な成功にすぎません。

必要なHTML出力

<div id="toc">
<p>table of contents:</p>
<h3>
<a href="#construction-block">Construction Block</a>
</h3>
<h3>
<a href="#construction-box">Construction Box</a>
</h3>
</div>

Answer 1

私は次のことを提案します（HTMLにいくつかの変更があります）：

$('<p />', {
    'text': 'Table of contents'
}).appendTo('#toc');
$('<ol />').appendTo('#toc');

$('h3').each(
    function() {
        var that = this,
            $that = $(that),
            a = $('<a />', {
                'href': '#' + that.id,
                'text': $that.text()
            }),
            li = $('<li />').append(a).appendTo('#toc ol');
    });​

このjQueryは、順序付きリスト（基本的に、目次とは何かのセマンティック定義）を作成し、新しく作成されて追加されたリストアイテム内h3の新しい要素に要素のテキストを追加します。a

名前付きアンカーの代わりに使用できる（そして使用する必要がある）ため、HTMLの変更は<a>要素の削除です（これはIEでも機能します）。id

新しいHTML：

<div id="toc"></div>
<h3 id="construction-block">Construction Block</h3>
<p>...</p>
<h3 id="construction-box">Construction Box</h3>
<p>...</p>

JSフィドルデモ。

これまでは考えていませんでしたがid、要素に属性がなくても同じことを実現できh3、jQueryを使用して関連するid属性を作成できます。

$('<p />', {
    'text': 'Table of contents'
}).appendTo('#toc');
$('<ol />').appendTo('#toc');

$('h3').each(
    function(i,el) {
        var $that = $(el),
            text = $that.text(),
            id = text.toLowerCase().replace(/\s+/,'-');
        el.id = id;
        var a = $('<a />', {
            'href' : '#' + id,
            'text' : text
        }),
            li = $('<li />').append(a).appendTo('#toc ol');
    });​

JSフィドルデモ。

参照：

• append()。
• appendTo()。
• jQuery（jQueryを使用して要素を作成する方法）。
• 正規表現。
• String.replace()。
• String.toLowerCase()。
• text()。

Answer 2

$("#toc").append("<h3>").text(current.html());