jquery masquer des objets si la classe d'objet ne contient pas de valeur

Question

Le titre peut être un peu déroutant, fondamentalement j'essaye d'écrire un script qui attrapera les valeurs sélectionnées à partir d'un formulaire déroulant, et cacher li si son classe ne contient pas les valeurs du formulaire déroulant .. si cela a du sens ?? Chaque li a plusieurs classes ..

Voici ce que j'ai jusqu'à présent (désolé s'il est brut):

FORMULAIRE:

<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, donc où je suis coincé est comment cacher tous les "#portfolio li" qui n'ont pas la classe qui est sortie comme "valeur". Je pensais que je pourrais utiliser hasClass mais je ne sais pas comment l'inverser .. si cela a du sens? Toute aide serait appréciée :)

Answer 1

Vous pouvez utiliser .not() et passer la classe, comme ceci:

$("#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; 
}); 

donnent qu'un go!

Answer 3

Je pensais juste que je jetterais celui-ci pour le plaisir. Prend une approche légèrement différente pour cacher les éléments <li>. Est-ce tout dans un sélecteur.

$("#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 

La variable value tiendra une chose comme String ceci:

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