Как создать ассоциативный массив JQuery из неупорядоченного списка HTML

В настоящее время в моем сценарии 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 (который был создан)

Как я могу это сделать так что создается новый объект массива, и он не просто видит вывод в виде текстовой строки?