Question

UPDATE:
Jared’s answer was the solution – here is my code, where I just added the else statement to perform the hide/show of the list items if indeed there were a matching set.

$(document).ready(function() {
$("form#filterForm").submit(function () {
    var type = $("select#typeList option:selected").val();
    var style = $("select#styleList option:selected").val();
    var items = $(".container .content ul li").filter('.' + type + '.' + style);

    if (!items.length) {
        alert('no items...');
        return false;
    } else {

   $(".container .content ul li").hide();
 $(".container .content ul li"+type+style).show();
 mCustomScrollbars();
 return false;
    }

});
}); 

end update.
I have some code working but I am having trouble taking it to the final step. I have a list of thumbnails in an unordered list.

<div class="content">
            <ul>
            <li class="portfolio_images type-portfolio_images category-commercial category-traditional"><img src="thumb_test-image1.jpg" /></li><li class="portfolio_images category-residential category-contemporary"><img src="thumb_test-image2.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial category-contemporary"><img src="thumb_test-image3.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial" ><img src="res1-2-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design"><img src="res1-2-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design"><img src="res3-3-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-residential category-contemporary" ><img src="thumb_test-image2.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial category-traditional"><img src="thumb_test-image1.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design" ><img src="res1-2-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial category-contemporary"><img src="thumb_test-image3.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design"><img src="res1-2-THUMB.jpg" /></li>
            </ul>
        </div>

Each list-item will have multiple categories. I have a form with 2 select fields, and I am using jQuery to get the value of the select fields, which correspond to the classNames in the list-items – these are set as variables and used to show and hide the list-items accordingly.

 <form id="filterForm" action="">
<select id="typeList" name="typeList">
<option value=".portfolio_images">All</option>
<option value=".category-commercial">category-commercial</option>
<option value=".category-residential">category-residential</option>
</select>

<select id="styleList" name="typeList">
<option value=".type-portfolio_images">All</option>
<option value=".category-traditional">category-traditional</option>
<option value=".category-contemporary">category-contemporary</option>
</select>
<input id="submit_btn" type="submit" value="submit" label="submit" />   </form>  

<script>
$(document).ready(function() {
$("form#filterForm").submit(function () {
var $selectTypeClass=$("select#typeList option:selected").val();
var $selectStyleClass=$("select#styleList option:selected").val();
$(".container .content ul li").not($selectTypeClass+$selectStyleClass).hide();
$(".container .content ul li"+$selectTypeClass+$selectStyleClass).show();
mCustomScrollbars();
return false;
});
});
 </script>  

This works really well. However, I have some cases where an item will have one category, but not the other: for example, it may have ‘category-traditional’ but NOT ‘category-residential’. So what I am looking to do, is test or check to see is there are NO items that match both selected classes, to show an alert message (“none of the items matched both selections, etc”). Otherwise, if there are any that match both, go ahead and perform the function as normal.

I am having a world of trouble because I tried using each() to test, but that didn’t work because it would loop through the list and always return the alert – because it basically stops on the first

in the list that doesn’t match and then breaks out of the loop.

So how would I go about setting it up to check if NONE of the items match both selected classes? Would I have to index the whole set somehow and check it as a whole, as opposed to the iteration that occurs with each() ? Stumped here – any help, I thank you in advance.

Answer 1

You can use multiple classes in CSS (and Sizzle) selectors like .class1.class2. Just search for elements specifically with both classes and test the length:

$(document).ready(function() {
   $("form#filterForm").submit(function () {
        var type = $("select#typeList option:selected").val();
        var style = $("select#styleList option:selected").val();
        var items = $(".container .content ul li").filter('.' + type + '.' + style);

        if (!items.length) {
            alert('no items...');
        }
    });
});