Use jquery to generate an arbitrarily deep list
<p>In javascript, I have an array of objects that represents an arbitrarily deep list...</p>

<pre><code>data =
[
 { title, depth },
 { title, depth },
 { title, depth }, 
 { title, depth }, 
]
</code></pre>

<p>...where depth is how deep in the list the element is.</p>

<p>I want to convert this data into html.</p>

<p>For example:  </p>

<pre><code>[
 { title: "one", depth : 1 },
 { title: "two", depth : 1 },
 { title: "three", depth : 2 }, 
 { title: "four", depth : 3 }, 
 { title: "five", depth : 1 }, 
]
</code></pre>

<p>becomes...</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;p&gt;one&lt;/p&gt;&lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;two&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;p&gt;three&lt;/p&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;p&gt;four&lt;/p&gt;&lt;/li&gt; 
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;p&gt;five&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>What is the simplest way to do this, using jQuery?</p>

<p>Thanks</p>
