jquery hide objects if object class doesn't contain a value

Question

Hi all,

The title might be a bit confusing, basically I'm trying to write up a script which will grab the selected values from a drop down form, and hide li's if its class does not contain the values from the drop down form.. if that makes sense?? Each li has multiple classes..

Here's what I've got so far (sorry if it's crude):

FORM:

<form action="" name="filter" id="filter" method="post">
        <select name="bedrooms">
          <option value="">- Select Bedrooms -</option>
          <option value="bed-1">1</option>
          <option value="bed-2">2</option>
          <option value="bed-3">3</option>
          <option value="bed-4">4</option>
          <option value="bed-5">5</option>
        </select>
        <select name="bathrooms">
          <option value="">- Select Bathrooms -</option>
          <option value="bath-1">1</option>
          <option value="bath-2">2</option>
          <option value="bath-3">3</option>
          <option value="bath-4">4</option>
          <option value="bath-5">5</option>
        </select>
        <select name="frontage">
          <option value="">- Select Frontage Size -</option>
          <option value="frontage-100">100</option>
          <option value="frontage-200">200</option>
          <option value="frontage-300">300</option>
          <option value="frontage-400">400</option>
          <option value="frontage-500">500</option>
        </select>
        <input type="submit" name="filter-submit" id="filter-submit" value="Go" />
      </form>

JQuery:

$("#filter-submit").click(function() {

          var foo = [];
          $("#filter :selected").each(function(i, value){
            foo[i] = $(value).val();
          });
          if (foo) {
            $.each(foo, function(index, value){
              if (value) {
                //hide other objects based on "value"
                //$("#portfolio li").hasClass();
            };
            });
          };

        return false;
        });

Ok so where I'm stuck is how to hide all "#portfolio li"'s which don't have the class which is outputted as "value". I thought I could use hasClass but not sure how to reverse it.. if that makes sense? Any help would be appreciated :)

Answer 1

You could use .not() and pass the class, like this:

$("#filter-submit").click(function() {
  var lis = $("#portfolio li");          //get all of the <li> elements
  $("#filter select").each(function() {  //loop through selected classes
    var val = $(this).val();             //get selected value, could be blank
    if(val) lis = lis.not('.' + val);    //get only <li>s without the class
  });
  lis.hide();                            //hide the ones without all classes
  return false;                          //prevent default behavior
});

Answer 2

$("#filter-submit").click(function()
{
    var Portfolio = $("#portfolio");
    $('li',Portfolio).show();

    $("#filter selectb :selected").each(function(i){
        Class = $(this).attr('value');
        $('li',Portfolio).not('.' + Class).get().hide();
    });
    return false;
});

give that a go!

Answer 3

Just thought I'd throw this one out there for fun. Takes a little different approach to hiding the <li> elements. Does it all in one selector.

$("#filter-submit").click(function() {
    var value = $('#filter select').map(function() {
        return ($(this).val() || null);
    }).get().join( '):not(.' );

    if(value) $('#portfolio li:not(.' + value + ')').hide();// Only filter if at
});​                                                         // least one selected

The value variable will hold a String something like this:

"bed-1):not(.bath-1):not(.frontage-100"