jQuery: Grouping Similar Items
<p>Using jQuery, I'm trying to group similar items in a list. Here's what I'm trying to do. Given a list like the following:</p>

<pre><code>&lt;ul&gt;
    &lt;li class="foo"&gt;Item #1&lt;/li&gt;
    &lt;li class="foo"&gt;Item #2&lt;/li&gt;
    &lt;li class="foo"&gt;Item #3&lt;/li&gt;
    &lt;li class="bar"&gt;Item #4&lt;/li&gt;
    &lt;li class="bar"&gt;Item #5&lt;/li&gt;
    &lt;li class="foo"&gt;Item #6&lt;/li&gt;
    &lt;li class="foo"&gt;Item #7&lt;/li&gt;
    &lt;li class="bar"&gt;Item #8&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I'd like to end up with the following:</p>

<pre><code>&lt;ul&gt;
    &lt;li class="foo"&gt;Item #1 &lt;a&gt;2 More Like This&lt;/a&gt;
        &lt;ul&gt;
            &lt;li class="foo"&gt;Item #2&lt;/li&gt;
            &lt;li class="foo"&gt;Item #3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="bar"&gt;Item #4&lt;/li&gt;
    &lt;li class="bar"&gt;Item #5&lt;/li&gt;
    &lt;li class="foo"&gt;Item #6 &lt;a&gt;1 More Like This&lt;/a&gt;
        &lt;ul&gt;
            &lt;li class="foo"&gt;Item #7&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="bar"&gt;Item #8&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>In short, anytime there's 2 or more items with class="foo", they should be grouped together up until reaching a non-class="foo" item. I can then use a link to show or hide the grouped items.</p>
