如何从jquery匹配集构建HTML？

我用这个JSFIDLE作为测试

基本上我有这个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>

我想要的是：

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

一个
两个
三
四
五
六

这应该是可行的，但在JSFIDLE中我什么都没有得到，在我的实际生产代码中，我得到了70个li元素，它们都说“6”

---

我被难住了。感谢您的帮助。如何获得生成的HTML？

您需要创建元素，使用以下语法：

$（“
”）

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);
});

实际上，您正在使用

title

变量更改页面中所有

li

元素的文本（您正在选择元素而不是创建）

.

这是你需要的

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

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

var$toc=$（“#目录”）；
$（“div.doc-section”）。每个（函数（）{
var title=$（this.attr（“数据标题”）；
var li=“
”+标题+”
”；
$toc.append（li）；
});

在创建li时，您没有打开和关闭角括号。请参阅更新的

var$toc=$（“#目录”）；
$toc.empty（）；
$（“div.doc-section”）。每个（功能（索引，项目）{
//控制台日志（项目）；
变量标题=$（项目）.attr（“数据标题”）；
var li=$（“
”）。文本（标题）；
$toc.append（li）；
});

如果要多次调用此函数，请不要忘记调用

$toc.empty（）

。

您可以使用：

$("div.doc-section").map(function(index, item){
  $toc.append('<li>'+$(item).data('title')+'</li>');//or $toc.append($('<li>').html($(item).data('title')));
});

$（“div.doc-section”）.map（函数（索引，项）{
$toc.append（'
'+$（item.data（'title'）+'
'）；//或$toc.append（$（'
'））.html（$（item.data（'title'））；
});

---

我想出来了。愚蠢的我需要改变这一点：

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

。。。对此

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

var li=$（“
”）文本（标题）；

---

顺便说一句，我真的没想到这么快会有这么多正确答案。谢谢大家。

幸好我只用了四个小时就搞定了。^）

$("div.doc-section").map(function(index, item){
  $toc.append('<li>'+$(item).data('title')+'</li>');//or $toc.append($('<li>').html($(item).data('title')));
});

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

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