CODEWITHSUNDEEP
jquery
Justin
Justin

Reputation: 329

Dynamically create LI items from DIV classes with jQuery

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/

Upvotes: 2

Views: 2519

Answers (3)

Thulasiram
Thulasiram

Reputation: 8552

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

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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

Upvotes: 1

Mild Fuzz
Mild Fuzz

Reputation: 30671

appendTo is your friend here.

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

Upvotes: 1

Related Questions