jquery - 如何从 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(已创建)

如何才能创建一个新的数组对象，并且它不仅仅将输出视为文本字符串？

Answer 1

首先，为了获得更大的灵 active ，我建议您修改标记以将列表项键存储在 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();

您可以在 this fiddle 中看到结果.