1

我想用 jQuery 为 html 文档生成一种目录 - 不使用任何插件。我刚刚开始学习/改进我的 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>
4

2 回答 2

3

我建议以下内容（鉴于 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>元素，因为使用idcan （和should）而不是命名锚点（这在 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 小提琴演示。

直到现在我才想到这一点，但是即使没有元素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 小提琴演示。

参考：

于 2012-10-09T07:49:17.887 回答
0 
$("#toc").append("<h3>").text(current.html());
于 2012-10-09T07:39:33.047 回答