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. Then you have to make sure to get the unique elements of the array, iterate over them and create the list entries. What particularly are you having problems with? — Felix Kling
– Felix Kling, Commented Apr 30, 2012 at 8:59
(what I want to say is that all the pieces are there, you just have to put them together) — Felix Kling
– Felix Kling, Commented Apr 30, 2012 at 9:06
My biggest issue so far has been rendering unique <li> items from the classes I've pulled, as well as not including "project-item" as one of those items. The best I got was listing it, then removing it - which is lengthy and I'm positive there is cleaner code. Everything I write seems to be way to bulky without the desired effect! I'll have a look through those links :) — Justin
– Justin, Commented Apr 30, 2012 at 9:14

Rory McCrossan · Accepted Answer · 2012-04-30 09:20:35Z

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, 2012 at 9:20

answered Apr 30, 2012 at 9:06

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Justin Over a year ago

That worked a treat! With a few minor adjustments it does everything I needed it to.

Mild Fuzz · Accepted Answer · 2012-04-30 08:58:47Z

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, 2012 at 8:58

Mild Fuzz

31.3k34 gold badges106 silver badges152 bronze badges

1 Comment

Felix Kling Over a year ago

I think the question is more about extracting the class information from the elements... but maybe not ;)

Thulasiram · Accepted Answer · 2012-04-30 12:54:59Z

<!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>

Collectives™ on Stack Overflow

Dynamically create LI items from DIV classes with jQuery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related