Question

a simplified version of an earlier question. I’m using a UI multiselector widget to filter products by class. The products will only be visible if their class contains values that match the checked checkbox values. Easily done if only one checkbox is checked.

the documentation says I can map the values of all checked boxes using this:

var checkedValues = $("select").multiselect("getChecked").map(function(){
   return this.value;   
}).get();

how can I hide all products except for the one’s who’s classes match at least one value in that array? is it possible? This is not working:

$('.main article, .error').hide();
$('.main article[class*=' + checkedValues + ']).show();

Answer 1

One convenient way would be to take the list of classes and construct a CSS selector in the form of

.class1, .class2, .class3, .etc

You can do this extremely easily with code like in your example and Array.join:

var selector = $("select").multiselect("getChecked")
                .map(function(){return "." + this.value; })
                .get()
                .join();

You can then let jQuery do the heavy lifting:

$('.main article').filter(selector).show();