如何從jquery匹配集合構建HTML？

我有這樣的jsfiddle作爲測試，http://jsfiddle.net/kahanu/7ctjcv4y/2/如何從jquery匹配集合構建HTML？

基本上我有這樣的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個元素，他們都說「六個」。

我很難過。任何幫助表示讚賞。我怎樣才能得到這個結果HTML？

來源

2014-09-01 King Wilder

您需要創建元素，使用此語法：$("<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);

其實你與title變量（您選擇，而不是創造內容）改變所有li元素的文本在你的頁面。

jsFiddle Demo。

來源

2014-09-01 07:39:41 dashtinejad

好東西它只花了我四個小時弄清楚。：^） – 2014-09-01 07:56:43

這是u需要

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

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

來源

2014-09-01 07:42:03 kefy

你錯過了開閉角度支架，同時創造裏。看到更新fiddles

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

也不要忘了打電話$toc.empty()如果你多次調用這個函數。

來源

2014-09-01 07:42:29

您可以使用：

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

Working Demo

來源

2014-09-01 07:47:49

-1

我想通了。笨。我需要改變這樣的：

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

...這個...

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

順便說一句，我真的沒想到這許多正確的答案這個迅速。謝謝大家。

來源

2014-09-01 07:53:50

如何從jquery匹配集合構建HTML？

回答

相關問題