文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jQuery从DIV类动态创建LI项

问使用jQuery从DIV类动态创建LI项
EN

Stack Overflow用户

提问于 2012-04-30 16:56:30

回答 3查看 2.4K关注 0票数 2

我使用了多个DIVs来列出如下项目：

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

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

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

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

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

在“Show All”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/

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-04-30 17:06:54

试试这个：

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);
};

票数 1

Stack Overflow用户

发布于 2012-04-30 16:58:47

appendTo是你的朋友。

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

票数 1

Stack Overflow用户

发布于 2012-04-30 20:55:00

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10380918

复制

相似问题

问使用jQuery从DIV类动态创建LI项
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery从DIV类动态创建LI项EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery从DIV类动态创建LI项
EN