How to hide list item based on attribute

How to hide list item based on attribute

Hello All --

I'm pretty new with jQuery and have run into a road block on a project. I have created a product finder that filters an unordered list by 4 criteria. Criteria 1 is a buttonSet, Criteria's 2 - 5 are sliders. When the page initially loads the entire unordered list is shown in the results panel.

The buttonSet is a click function to remove, then add the 'selected' class. When a button is clicked only the list items that match the shape attribute are shown.

The problem that I am having is that a couple of the buttons have a result with a description for a no product match paragraph. I'd like to filter out this list item (description) and hide it from the results panel in the initial page load. I've tried hiding the list item by css class and by attribute but its not working for me.

Below is the currently working code:

  1. $(function()
    {
      // initialize variables
      currShape = "all";
      currColor = "0";
      currFlavor = "0";
      currStyle = "0";

      // setup sliders
      $( "#criteria > span" ).each(function()
      {
         $(this).empty().slider(
         {
            range: "min",
            min: 0,
            max: 8,
            value: 0,
            step: 1,
            animate: true,
            orientation: "vertical"
         });
      });
    });

    // filter by shape
    $(function()
    {
      $('.buttonSet li a').click(function()
      {
         $('.buttonSet li').removeClass('selected');
         $(this).parent('li').addClass('selected');
         var thisShape = $(this).attr('shape');
         if(thisShape!="all")
         {
            $('.data li[shape='+thisShape+']').stop().show();
            $('.data li[shape!='+thisShape+']').stop().hide();
         }
         else
         {
            $('.data li').stop().show();
         }
         currShape = thisShape;
         if(currColor!="0")
            $('.data li[color!='+currColor+']').hide();
         if(currFlavor!="0")
            $('.data li[flavor!='+currFlavor+']').hide();
         if(currStyle!="0")
            $('.data li[pfstyle!='+currStyle+']').hide();
      });
    });

    //filter by color
    $(function()
    {
      $( "#criteria > span#criteria1" ).each(function()
      {
         $(this).slider(
         {
            slide: function(event, ui)
            {
               $('.data li').stop().show();
               $('.data li[color='+(ui.value)+']').stop().show();
               $('.data li[color!='+(ui.value)+']').stop().hide();
               if(currShape!="all")
                  $('.data li[shape!='+currShape+']').hide();
               if(currFlavor!="0")
                  $('.data li[flavor!='+currFlavor+']').hide();
               if(currStyle!="0")
                  $('.data li[pfstyle!='+currStyle+']').hide();
            },
            stop: function(event, ui)
            {
               currColor = ui.value;
            }
         });
      });
    });

    //filter by flavor
    $(function()
    {
      $( "#criteria > span#criteria2" ).each(function()
      {
         $(this).slider(
         {
            slide: function(event, ui)
            {
               $('.data li').stop().show();
               $('.data li[flavor='+(ui.value)+']').stop().show();
               $('.data li[flavor!='+(ui.value)+']').stop().hide();
               if(currShape!="all")
                  $('.data li[shape!='+currShape+']').hide();
               if(currColor!="0")
                  $('.data li[color!='+currColor+']').hide();
               if(currStyle!="0")
                  $('.data li[pfstyle!='+currPFStyle+']').hide();
            },
            stop: function(event, ui)
            {
               currFlavor = ui.value;
            }
         });
      });
    });

    //filter by style
    $(function()
    {
      $( "#criteria > span#criteria3" ).each(function()
      {
         $(this).slider(
         {
            slide: function(event, ui)
            {
               $('.data li').stop().show();
               $('.data li[pfstyle='+(ui.value)+']').stop().show();
               $('.data li[pfstyle!='+(ui.value)+']').stop().hide();
               if(currShape!="all")
                  $('.data li[shape!='+currShape+']').hide();
               if(currColor!="0")
                  $('.data li[color!='+currColor+']').hide();
               if(currFlavor!="0")
                  $('.data li[flavor!='+currFlavor+']').hide();
            },
            stop: function(event, ui)
            {
               currStyle = ui.value;
            }
         });
      });
    });

































































































































I have tried the following to remove the list item by css class

  1. // filter by shape
    $(function()
    {
      $('.buttonSet li a').click(function()
      {
         $('.buttonSet li').removeClass('selected');
         $(this).parent('li').addClass('selected');
         var thisShape = $(this).attr('shape');
         if(thisShape!="all")
         {
            $('.data li[shape='+thisShape+']').stop().show();
            $('.data li[shape!='+thisShape+']').stop().hide();
         }
         else
         {
            $('.data li').stop().show();
            $('.data li.noindent').stop().hide();
         }
         currShape = thisShape;
         if(currColor!="0")
            $('.data li[color!='+currColor+']').hide();
         if(currFlavor!="0")
            $('.data li[flavor!='+currFlavor+']').hide();
         if(currStyle!="0")
            $('.data li[pfstyle!='+currStyle+']').hide();
      });
    });

























And, this to remove the list item by attribute

  1. $(function()
    {
      // initialize variables
      currShape = "all";
      currColor = "0";
      currFlavor = "0";
      currStyle = "0";
      noMatch = "none";

      // setup sliders
      $( "#criteria > span" ).each(function()
      {
         $(this).empty().slider(
         {
            range: "min",
            min: 0,
            max: 8,
            value: 0,
            step: 1,
            animate: true,
            orientation: "vertical"
         });
      });
    });

    // filter by shape
    $(function()
    {
      $('.buttonSet li a').click(function()
      {
         $('.buttonSet li').removeClass('selected');
         $(this).parent('li').addClass('selected');
         var thisShape = $(this).attr('shape');
         if(thisShape!="all")
         {
            $('.data li[shape='+thisShape+']').stop().show();
            $('.data li[shape!='+thisShape+']').stop().hide();
         }
         else
         {
            $('.data li').stop().show();
            $('.data li[shape='+noMatch+']').stop().hide();
         }
         currShape = thisShape;
         if(currColor!="0")
            $('.data li[color!='+currColor+']').hide();
         if(currFlavor!="0")
            $('.data li[flavor!='+currFlavor+']').hide();
         if(currStyle!="0")
            $('.data li[pfstyle!='+currStyle+']').hide();
      });
    });



















































You can see the way the code works here:  http://dev.concentre.us/productfinder2/

Can anyone give me a hint on what I'm missing?