如何從一個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 =新陣列（已創建）

我怎麼能這樣做，這樣一個新的數組對象被創建，它不只是看到輸出的文本字符串？

Answer 1

試試這個。

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/

PS：請添加引用json2.js對於沒有JSON支持（如果您使用JSON.stringify）瀏覽器

Answer 2

首先，有更多的靈活性，我建議你修改您的標記列表項的密鑰存儲在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中查看結果。