Как я могу показать / скрыть элементы, основанные на множественных атрибутах и ​​множественных атрибутных значениях?

Question

Я хотел бы просматривать / скрывать div на странице, основываясь на атрибутных фильтрах. Я сделал несколько атрибутов, которые могут иметь несколько значений. Пользователи могут выбирать, какие из них они хотят видеть отображаемыми.

Я не могу получить правильный алгоритм (или я не знаю, какую Javascript/jQuery функцию использовать). Следующее, очевидно, не работает. Сначала я показываю ВСЕ элементы, а затем перебираю фильтры, скрывая те, которые не соответствуют атрибутам (читай: текущий атрибут в цикле). Это означает, что элементы будут скрыты, даже если они могут соответствовать атрибуту позже ...

Как я могу заставить этот механизм фильтра работать и не исключать / скрывать элементы, которые не нужно скрывать, основываясь на выбранных атрибутах позже в цикле? Может быть, есть оператор OR, который я могу использовать с выбор атрибута ('div[group=firstgroup|thirdgroup]')?

Javascript:

    $(document).ready(function() {
        var items = $('#items').find('div');
        $(items).show();

        var groupsToShow = Array('firstgroup','thirdgroup');
        var namesToShow = Array('Fred','Pete');
        var applicationsToShow = Array('light');

        for(var i=0;i<groupsToShow;i++) {
            $(items).find('div[group!='+groupsToShow[i]+']').hide();    
        }

        for(var i=0;i<namesToShow;i++) {
            $(items).find('div[name!='+namesToShow[i]+']').hide();    
        }

        for(var i=0;i<applicationsToShow;i++) {
            $(items).find('div[application!='+applicationsToShow[i]+']').hide();    
        }
    });

HTML код:

<div id="items">
    <div group="firstgroup" name="Rob" application="special"></div>
    <div group="firstgroup" name="Fred" application="light"></div>
    <div group="secondgroup" name="Pete" application="special"></div>
    <div group="thirdgroup" name="Pete" application="special"></div>
    <div group="thirdgroup" name="Pete" application="light"></div>
    <div group="secondgroup" name="Pete" application="normal"></div>
    <div group="thirdgroup" name="Pete" application="special"></div>
</div>

Answer 1

Насколько я понимаю, вы хотите, чтобы элементы отображались только в том случае, если они удовлетворяют тому, что содержится во всех трех массивах. Таким образом, в описанной выше ситуации второй и пятый DIV будут единственными, которые показывают ... Это правильно?

Если мои предположения верны, то это должно сработать:

var show = {
    'group': ['firstgroup','thirdgroup'],
    'name': ['Fred','Pete'],
    'application': ['light']
};

$('#items div')
    .hide()
    .filter(function(){
        // Only returns true for elements
        // that satisfy all three arrays
        for (var i in show) {
            var attr = $(this).attr(i),
                match = ('|' + show[i].join('|') + '|').indexOf(attr) > -1;
            if (!match) {
                return false;
            }
        }
        // If we reach this point then we can assert
        // that the element contains all required attributes
        return true;
    })
    .show();

Answer 2

Вы можете создать список элементов для отображения, используя add ():

$(document).ready(function() {
    var items = $('#items').find('div');
    $(items).hide();

    var groupsToShow = ['firstgroup','thirdgroup'];
    var namesToShow = ['Fred','Pete'];
    var applicationsToShow = ['light'];

    var $itemsToShow = $();

    for(var i=0;i<groupsToShow;i++) {
        $itemsToShow = $itemsToShow.add('div[group='+groupsToShow[i]+']');
    }

    for(var i=0;i<namesToShow;i++) {
        $itemsToShow = $itemsToShow.add('div[name='+namesToShow[i]+']');    
    }

    for(var i=0;i<applicationsToShow;i++) {
        $itemsToShow = $itemsToShow.add(('div[application='+applicationsToShow[i]+']');    
    }

    $itemsToShow.show();
});