jquery - 转义 jQuery 追加字符串以使用变量作为 "href"目标以及内部和元素

Question

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

我在附加没有 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'
            );
        });    

所以我找不到一种方法来转义追加函数内的行。

$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>   

Answer 1

出于性能目的，您应该首先附加到 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/ - 更新版本