不带插件的jQuery toc生成

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元素的文本附加到新创建和附加的list-items中的新a元素。

超文本标记语言的变化是删除了<a>元素，因为可以(也应该)使用id而不是命名锚点(这在IE中也是有效的)。

新的HTML：

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

JS Fiddle demo。

我直到现在才想到这一点，但即使在h3元素上没有id属性，也可以实现同样的效果，只需使用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 Fiddle demo。

参考文献：

• append().
• appendTo().
• jQuery (how to create elements with jQuery).
• Regular Expressions.
• String.replace().
• String.toLowerCase().
• text().

Answer 2

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