javascript - 自动从 html 数据定义数组

Question

我在自动从 HTML 数据定义数组时遇到问题。

这是我的数据：

<div id="events">
    <div id="blabla" data-title="Five K for charity" data-date="01/13/2013"></div>
    <div id="bleble" data-title="Dinner" data-date="01/25/2013"></div>
    <div id="Div1" data-title="Meeting with manager" data-date="01/01/2013"></div>
</div>

我想定义一个这样的数组：

var events = [
        { Title: "Five K for charity", Date: new Date("01/13/2013") },
        { Title: "Dinner", Date: new Date("01/25/2013") },
        { Title: "Meeting with manager", Date: new Date("01/01/2013") }
    ];

我可以像这样从中获取数据：

$("#events > div").each(function (index) {
        console.log("{ Title: " + "\"" + $(this).data("title") + "\", " + "Date: new Date(\"" + $(this).data("date") + "\") }");
    });

但我不知道如何将它们“打印”到该数组中。有没有办法做到这一点？

我会很高兴得到任何答案:-)

Answer 1

var events = [];

$("#events > div").each(function (index) {
    events.push({
        Title: $(this).data("title"),
        Date: new Date($(this).data("date"))
    })
});

Answer 2

您目前正在做的是将它们形成为一些脆弱的 JSON 格式。

相反，您应该直接创建一个对象文字；

$("#events > div").each(function (index) {
   var obj = { 
       Title: $(this).data("title"), 
       Date: new Date($(this).data("date")) 
   };
});

并且要将它放在一个数组中，您可以使用jQuery 的map()：

var ar = $("#events > div").map(function (index) {
   return { 
       Title: $(this).data("title"), 
       Date: new Date($(this).data("date")) 
   };
});