Question

I have multiple DIVs being used to list items like so:

<div class="project-item Video">
    <p>Test</p>
</div>

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

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

Problems I’m facing are making sure the categories don’t repeat. There will be multiple DIVs listed. e.g:

<div class="project-item Video">
    <p>Test</p>
</div>
<div class="project-item Photography">
    <p>Test</p>
</div>
<div class="project-item Video Photography">
    <p>Test</p>
</div>

There is a UL above the DIV’s with the following markup:

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

Underneath the ‘Show All’ LI I want to then list each category, for example:

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

Here is a jsFiddle that shows the example HTML markup without the needed lists: http://jsfiddle.net/GaExx/1/

Answer 1

Try this:

var categories = [];
$(".project-item").each(function() {
    var cats = $(this).attr("class").split(" ");
    for(var i = 0; i < cats.length; i++) {
        if (cats[i] != "project-item" && $.inArray(cats[i], categories) == -1)
            categories.push(cats[i]);
    }        
});

for (var i = 0; i < categories.length; i++) {
    var $li = $("<li></li>").appendTo("#filters");
    var $a = $("<a></a>").attr("href", "#").data("option-value", categories[i]).text(categories[i]).appendTo($li);
};

Example fiddle