title: How to make a JQuery associative array from a HTML unordered list
body: <p>Currently in my JQuery script I have a hard coded array:</p>
  
  <pre><code>var arrayList = [
      {"id":"1","category":"foo1","title":"bar1","image":"images/foobar1.gif"},
      {"id":"2","category":"foo2","title":"bar2","image":"images/foobar2.gif"},
      etc....
  ];
  </code></pre>
  
  <p>Instead of that array being hard coded in my script I need to create that dynamically from a set of HTML unordered lists that are generated from the system so the markup would be:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;foo1&lt;/li&gt;
      &lt;li&gt;bar1&lt;/li&gt;
      &lt;li&gt;images/foobar1.gif&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li&gt;foo2&lt;/li&gt;
      &lt;li&gt;bar2&lt;/li&gt;
      &lt;li&gt;images/foobar2.gif&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>etc....</p>
  
  <p>I would need:</p>
  
  <p>var arrayList = new Array (that has been created)</p>
  
  <p>How can I do this so that a new array object is created and it doesn't just see the output as a text string?</p>