Dynamically create LI items from DIV classes with jQuery

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/

What have you tried so far? It should not be difficult to [get all classes of the `.project-item` elements](http://stackoverflow.com/questions/9279368/how-to-get-all-css-classes-of-an-element). Then you have to make sure to get the [unique elements of the array](http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript), iterate over them and create the list entries. What particularly are you having problems with? — Felix Kling, Apr 30 '12 at 08:59
(what I want to say is that all the pieces are there, you just have to put them together) — Felix Kling, Apr 30 '12 at 09:06

score 1 · Answer 1 · answered Apr 30 '12 at 08:58

1

appendTo is your friend here.

$('<li><a href="#filter" data-option-value="*" class="selected">Show all</a></li>').appendTo('.option-set');

answered Apr 30 '12 at 08:58

Mild Fuzz

29,463
31
100
148

I think the question is more about extracting the class information from the elements... but maybe not ;) – Felix Kling Apr 30 '12 at 09:03

Rory McCrossan · Accepted Answer · 2012-04-30T09:20:35.687

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

edited Apr 30 '12 at 09:20

answered Apr 30 '12 at 09:06

Rory McCrossan

331,213
40
305
339

That worked a treat! With a few minor adjustments it does everything I needed it to. – Justin Apr 30 '12 at 09:53

score 1 · Answer 3 · answered Apr 30 '12 at 12:54

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.project-item').each(function () {
                var obj = $(this);

                $.each(obj.attr('class').split(' '), function (i, value) {
                    if (value !== 'project-item' && $('#filters').find('[data-option-value="' + value + '"]').length === 0) {
                        $('ul#filters').append($('<li />').append($('<a />', { 'href': '#filter', 'data-option-value': value }).text(value)));
                    }
                });
            });
        });
    </script>
</head>
<body>
    <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>
    <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>
</body>
</html>

Dynamically create LI items from DIV classes with jQuery

3 Answers3