jquery - 如何从 jquery 匹配集构建 HTML？

Question

我有这个 JSFiddle 作为测试，http://jsfiddle.net/kahanu/7ctjcv4y/2/

基本上我有这个 HTML:

<div class="doc-section" data-title="One"></div>
<div class="doc-section" data-title="Two"></div>
<div class="doc-section" data-title="Three"></div>
<div class="doc-section" data-title="Four"></div>
<div class="doc-section" data-title="Five"></div>
<div class="doc-section" data-title="Six"></div>

<ol id="table-of-contents"></ol>

还有这个 jquery:

var $toc = $("#table-of-contents");

$("div.doc-section").each(function(index, item){
   var title = $(item).attr("data-title");
    var li = $("li").text(title);
    $toc.append(li);
});

我想要的是这样的:

<ol id="table-of-contents">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ol>

这应该可行，但在 JSFiddle 中我没有得到任何东西，而在我的实际生产代码中，我得到了 70 个 li 元素，它们都说“六”。

我被难住了。任何帮助表示赞赏。我如何获得生成的 HTML？

Answer 1

您需要使用以下语法创建元素:$("<li></li>") 。

var $toc = $("#table-of-contents");

$("div.doc-section").each(function(index, item){
   var title = $(item).attr("data-title");
   var li = $("<li></li>").text(title);
   $toc.append(li);
});

你写道:

var li = $("li").text(title);

实际上你正在改变所有li的文本页面中带有 title 的元素变量(您正在选择元素而不是创建元素)。

jsFiddle Demo .