2

次のようにアイテムをリストするために複数の 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>

必要なリストを除いた HTML マークアップの例を示す jsFiddle を次に示します: http://jsfiddle.net/GaExx/1/

4

3 に答える 3

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

フィドルの例

于 2012-04-30T09:06:53.603 に答える
1 
<!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>
于 2012-04-30T12:54:59.640 に答える
1

appendToはここであなたの友達です。

$('<li><a href="#filter" data-option-value="*" class="selected">Show all</a></li>').appendTo('.option-set');
于 2012-04-30T08:58:47.473 に答える