創建通過顯示每個HTML中的陣列和環

Question

ID要創建陣列中存儲：通過每個條目

document title 
document summary 
document link 

，然後循環，在HTML顯示每個。

到目前爲止香港專業教育學院得到了我的陣..：

var docs = [ 
{ 
    doc-title: "onesider number 1", 
    doc-info: "its onesider number 1", 
    doc-src: "link here" 
}, 

{ 
    doc-title: "Onesider number 2", 
    doc-info: "its onesider number 2", 
    doc-src: "link here" 
} 

]; 

但畢竟這我不知道如何循環並顯示每個。有什麼建議麼？

Answer 1

你問在同一時間兩個問題：

• 如何環在JavaScript
• 如何追加數據- 從該LOOP-到DOM

你可以查看關於loops in javascript，each() function in jQuery的問題，還可以看看append，prep結束，文本，html，attr在jQuery documentation功能。

這可能是你正在嘗試實現（假設你正在使用jQuery）：

var docs = [ 
    { 
     docTitle: "onesider number 1", 
     docInfo: "its onesider number 1", 
     docSrc: "link here" 
    }, 
    { 
     docTitle: "Onesider number 2", 
     docInfo: "its onesider number 2", 
     docSrc: "link here" 
    } 
], 

// This should be your items container 
container = $('#documents'); 


$.each(docs,function(i,doc){ 

    // Let's create the DOM 
    var item = $('<div>').addClass('item'), 
     title = $('<h1>'), 
     info = $('<p>'), 
     link = $('<a>'); 

    // Add content to the DOM 
    link.attr('href',doc.docSrc) 
    .text(doc.docTitle) 
    .appendTo(title); 

    info.text(doc.docInfo); 

    // Append the infos to the item 
    item.append(title,info); 

    // Append the item to the container 
    item.appendTo(container); 
}); 

有了這個基本HTML：

​​3210

你應該結束向上的東西，如：

<div id="documents"> 
    <div class="item"> 
    <h1><a href="link here">onesider number 1</a></h1> 
    <p>its onesider number 1</p> 
    </div> 
    <div class="item"> 
    <h1><a href="link here">onesider number 2</a></h1> 
    <p>its onesider number 2</p> 
    </div> 
</div> 

這裏是the working jsFiddle

Answer 2

使用$.each來循環所有項目。

文檔：http://api.jquery.com/jQuery.each/

$.each(docs, function(index, obj){ 
    $.each(obj, function(key, value){ 
     alert(key+'=='+value); //manipulate the items here 
    }) 
}) 

演示：http://jsfiddle.net/WypxX/1/