JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<div id="items">
    <div group="firstgroup" name="Rob" application="special">1</div>
    <div group="firstgroup" name="Fred" application="light">2</div>
    <div group="secondgroup" name="Pete" application="special">3</div>
    <div group="thirdgroup" name="Pete" application="special">4</div>
    <div group="thirdgroup" name="Pete" application="light">5</div>
    <div group="secondgroup" name="Pete" application="normal"></div>
    <div group="thirdgroup" name="Pete" application="special">7</div>
</div>
<button>
click
</button>

JavaScript

$("button").on("click",function(){
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();
});