jquery - 使用 jQuery 从 DIV 类动态创建 LI 项

Question

我有多个 DIV 用于列出项目，如下所示:

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

每个 DIV 都添加了一组类别(例如视频)。

我想自动从类中创建列表项，但省略 .project-item。

我面临的问题是确保类别不重复。将列出多个 DIV。例如:

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

DIV 上方有一个 UL，带有以下标记:

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

在“显示全部”LI 下，我想列出每个类别，例如:

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

下面是一个 jsFiddle，它显示了示例 HTML 标记，但没有所需的列表: http://jsfiddle.net/GaExx/1/

Answer 1

试试这个:

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