首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >JavaScript功能显示时间表

JavaScript功能显示时间表
EN

Stack Overflow用户
提问于 2015-06-25 05:05:11
回答 1查看 601关注 0票数 1

如何通过使用for循环添加JavaScript代码来迭代包含JSON数据的调度数组?

代码语言:javascript
运行
复制
var schedule = [{
  "id": "session-1",
  "title": "Registration",
  "tracks": [1, 2]
}, {
  "id": "session-2",
  "title": "Moving the Web forward with HTML5",
  "tracks": [1, 2]
}, {
  "id": "session-3",
  "title": "Diving in at the deep end with Canvas",
  "tracks": [1]
}, {
  "id": "session-4",
  "title": "New Technologies in Enterprise",
  "tracks": [2]
}, {
  "id": "session-5",
  "title": "WebSockets and You",
  "tracks": [1]
}, {
  "id": "session-6",
  "title": "Coffee and Cake Break",
  "tracks": [1, 2]
}, {
  "id": "session-7",
  "title": "Building Responsive UIs",
  "tracks": [1]
}, {
  "id": "session-8",
  "title": "Fun with Forms (no, really!)",
  "tracks": [2]
}, {
  "id": "session-9",
  "title": "A Fresh Look at Layouts",
  "tracks": [1]
}, {
  "id": "session-10",
  "title": "Real-world Applications of HTML5 APIs",
  "tracks": [2]
}, {
  "id": "session-11",
  "title": "Lunch",
  "tracks": [1, 2]
}, {
  "id": "session-12",
  "title": "Getting to Grips with JavaScript",
  "tracks": [1]
}, {
  "id": "session-13",
  "title": "Transforms and Animations",
  "tracks": [2]
}, {
  "id": "session-14",
  "title": "Web Design Adventures with CSS3",
  "tracks": [1]
}, {
  "id": "session-15",
  "title": "Introducing Data Access and Caching",
  "tracks": [2]
}, {
  "id": "session-16",
  "title": "Closing Thanks and Prizes",
  "tracks": [1, 2]
}];


// TODO: Task 2 - Get the "schedule" list element from the document
var list = document.getElementById("schedule");



function createSessionElement(session) {
  var session = document.createElement("li");
  li.textContent = session;
  JSON.parse(session, [title]);
  return the < li >


    {
      // TODO: Task 3 - Create a <li> element for the session.
      //       Add the session title as the <li> text content
      //       Return the <li> element
    }
};

function clearList() {
  while (list.firstChild) {
    list.removeChild(list.firstChild);
  }
}

function displaySchedule() {
  clearList();
  for (var i = 0; i < 14; i++) {

    list.textContent(title);
  }


  // TODO: Task 4 - Loop through the schedule array
  //       Create session elements
  //       Append the elements to the list   
}

我不能让它为数组中的每个项目创建一个会话对象,并将会话的标题添加到计划页面上的列表元素中。

EN

回答 1

Stack Overflow用户

发布于 2015-06-25 06:21:20

最简单的解决方案是使用像jQuery这样的库来处理DOM操作。在jQuery的帮助下,很容易为数组中的每一项向列表中添加一个<li/>元素。

类似于:

代码语言:javascript
运行
复制
var $list = $("#schedule");
$.each(schedule, function(i, session) {
    $list.append("<li>" + session.title + "</li>");
});

http://jsbin.com/qigilidofa/edit?html,js,output

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31037015

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档