如何从HTML无序列表创建一个JQuery关联数组

Question

目前在我的 JQuery 脚本中，我有一个硬编码的数组：

var arrayList = [
    {"id":"1","category":"foo1","title":"bar1","image":"images/foobar1.gif"},
    {"id":"2","category":"foo2","title":"bar2","image":"images/foobar2.gif"},
    etc....
];

我需要动态地从一组由系统生成的HTML无序列表中创建数组，而不是在我的脚本中硬编码该数组。因此，标记将如下所示：

<ul>
    <li>1</li>
    <li>foo1</li>
    <li>bar1</li>
    <li>images/foobar1.gif</li>
</ul>

<ul>
    <li>2</li>
    <li>foo2</li>
    <li>bar2</li>
    <li>images/foobar2.gif</li>
</ul>

我需要：

创建一个新的数组对象，代码如下：

var arrayList = new Array();

这样可以确保新的数组对象被正确创建，而不是只将输出视为文本字符串。

- dbach

Answer 1

首先，为了更加灵活，我建议您修改标记以将列表项键存储在data属性中：

<ul>
    <li data-key="id">1</li>
    <li data-key="category">foo1</li>
    <li data-key="title">bar1</li>
    <li data-key="image">images/foobar1.gif</li>
</ul>

<ul>
    <li data-key="id">2</li>
    <li data-key="category">foo2</li>
    <li data-key="title">bar2</li>
    <li data-key="image">images/foobar2.gif</li>
</ul>

从这里开始，您可以使用map()来构建您的对象：

var arrayList = $("ul").map(function() {
    var obj = {};
    $("li", this).each(function() {
        var $this = $(this);
        obj[$this.data("key")] = $this.text();
    });
    return obj;
}).get();

您可以在这个 fiddle中看到结果。

- Frédéric Hamidi

---

我发现这非常干净和灵活。（但它们都能工作...） - sheriffderek

Answer 2

试一试。

var items = [];
$("ul").each(function(){
    var item = {};
    var lis = $(this).find("li");
    item.id = lis.get(0).innerHTML;
    item.category = lis.get(1).innerHTML;
    item.title = lis.get(2).innerHTML;
    item.image = lis.get(3).innerHTML;
    items.push(item);
});

var DTO = JSON.stringify(items);

items会保存你的关联对象数组，DTO会保存该数组的JSON字符串。
根据需要选择。

演示： http://jsfiddle.net/naveen/yA54G/

附注：对于不支持JSON（如果使用JSON.stringify）的浏览器，请添加json2.js参考。

- naveen