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中循环
如何追加数据 - 从该循环 - 到DOM

您可以查看有关loops in javascript，each() function in jQuery的问题，还可以查看jQuery documentation中的追加，前置，文字，html，attr函数。

这可能是你想要实现的（假设你正在使用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：

<div id="documents"></div>

你最终会得到类似的东西：

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

创建一个数组并循环显示每个HTML

2 个答案: