1

我正在构建一个脚本，用于生成页面上标题（当前仅）的目录（as）。

我在附加没有 id 的元素时遇到问题，因为我想将 href 目标分配给链接，并使用变量作为链接的内容。

我正在处理的代码：

        var h_num; // introduce the running id counter
        $("h2").each(function (i) {
            // retrieve the text contained in the element
            $h_content = $(this).text();
            // add a running id to the h2
            $(this).attr("id", ("h2_"+i));
            // the id attribute value that was just added to the element
            $h_num = ("h2_"+i);
            $new_id = ("#" + $h_num);
            console.log($h_num, "hoonum", $new_id, "newid"); //for debugging
            // append a <li> element with a link to the heading 
            $('#toc ol').append(
                '<li>' + '<a href="$h_num">$h_content'
            );
        });

所以我找不到一种方法来逃避 append 函数中的行。

$h_content 是标题的标题（作为标题链接的文本包含在内），$new_id 是 href 目标 ID。

我希望目录的标记看起来像这样

<ol>
    <li><a href="#h2_0">First heading topic</a></li>
    <li><a href="#h2_1">Second heading topic</a></li>
</ol>
4

1 回答 1

3

出于性能目的，您应该附加到documentFragement第一个。 

    var frag = document.createDocumentFragment();
    $("h2").each(function (i, el) {
        var li = document.createElement( "li" );
        var $a = $("<a>", { id: "h2_" + i }).text( $(el).text() );
        li.appendChild( $a[0] )
        frag.appendChild( li );
    });
    $("ol").append(frag);
​

http://jsfiddle.net/landau/RyeAA/

http://jsfiddle.net/landau/RyeAA/5/ - 更新版本

于 2012-05-27T14:23:08.827 回答