Dynamically create LI items from DIV classes with jQuery
<p>I have multiple DIVs being used to list items like so:</p>

<pre><code>&lt;div class="project-item Video"&gt;
    &lt;p&gt;Test&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>Each DIV has a set of categories added to it (for example, Video).</p>

<p>I want to automatically create list items from the classes, but leave out .project-item.</p>

<p>Problems I'm facing are making sure the categories don't repeat. There will be multiple DIVs listed. e.g:</p>

<pre><code>&lt;div class="project-item Video"&gt;
    &lt;p&gt;Test&lt;/p&gt;
&lt;/div&gt;
&lt;div class="project-item Photography"&gt;
    &lt;p&gt;Test&lt;/p&gt;
&lt;/div&gt;
&lt;div class="project-item Video Photography"&gt;
    &lt;p&gt;Test&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>There is a UL above the DIV's with the following markup:</p>

<pre><code>&lt;ul id="filters" class="option-set clearfix" data-option-key="filter"&gt;
    &lt;li&gt;&lt;a href="#filter" data-option-value="*" class="selected"&gt;Show all&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Underneath the 'Show All' LI I want to then list each category, for example:</p>

<pre><code>&lt;ul id="filters" class="option-set clearfix" data-option-key="filter"&gt;
    &lt;li&gt;&lt;a href="#filter" data-option-value="*" class="selected"&gt;Show all&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#filter" data-option-value="Video"&gt;Video&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Here is a jsFiddle that shows the example HTML markup without the needed lists: <a href="http://jsfiddle.net/GaExx/1/" rel="nofollow">http://jsfiddle.net/GaExx/1/</a></p>
