Filter based on multiple classes using JQuery

Question

Hello,

I have this script that basically will show a product or products based on the class names. So if the li has a class name of 'c2' it will show product c2, if the li has class names 'b8f b12r a12 ps10' it should show all those products b8f b12r a12 ps10.

The issue I am having is its only filtering/showing the selectors with a single classname and not the multiple ones. I understand that its because of the $(this) in var=filter, but when even when I enter the class names manually its not showing either.

The Script

 $('#products ul li').hide();
 $('#outlet li').click(function(e){
      e.preventDefault();
      var filter = $(this).attr('class');
      $('#products ul li').show();
      $('#products ul li:not(.' + filter + ')').hide();

The Selector

<ul id="outlet">
     <li class="c2">2</li>
     <li class="d145">7</li>
     <li class="b8f b12r a12 ps10">8</li>
</ul>

The products

 <ul id="products">
      <li class="c2"><img src="images/c2.png">c2</li>
      <li class="d145"><img src="images/d145.png">d145</li>
      <li class="b8f"><img src="images/b8f.png">b8f</li>
      <li class="b12r"><img src="images/b12r.png">b12r</li>
      <li class="a12"><img src="images/a12.png">a12</li>
      <li class="ps10"><img src="images/ps10.png">ps10</li>
 </ul>

Thanks & Regards Said

Answer 1

Try this:

$('#products ul li').show();
$('#products ul li').not('.' + $(this).attr('class').split(' ').join(', .')).hide();

I prefer using the separate not function as it looks cleaner. That should result in the not clause looking like this:

$('#products ul li').not('.c2, .d145, .a12').hide();

You also have an error on your selector, you are selecting #products ul li whereas it is the ul which has the id of #products so it should be #products li instead.

Answer 2

try something like this:

$('#outlet li').click(function(e){
    e.preventDefault();
    $('#products ul li').hide();
    var classes = $(this).attr('class').split(' '); // create an array of class names
    $.each(classes, function() { // iterate over array 
        $('#products ul li.' + this).show();
    });
});