[Resolvido] Filtrar uma lista com Jquery

[eronventer 2]

Pessoal,

 

Estou montando um script para filtrar produtos de acordo com a cor selecionada, porém estou com dificuldades de filtrar quando eu seleciono mais de uma cor, por exemplo, se eu marcar "Azul" e "Verde" ele deveria me mostrar as listas que contém a classe "azul" e "verde", mas sempre acaba mostrando somente a lista da última cor selecionada.

 

HTML:

<div id="menu-cores">
<ul>
   	<li><div class="bt-2"><span class="select"></span></div><span>Todas as cores</span></li>
   	<li><div class="bt-2"></span></div><span>Preto</span></li>
   	<li><div class="bt-2"></span></div><span>Verde</span></li>
   	<li><div class="bt-2"></span></div><span>Branco</span></li>
  	<li><div class="bt-2"></span></div><span>Azul</span></li>
</ul>
</div>

<div class="content">
<ul>
   	<li class="preto">
       	<div class="prod">Preto</div>
       	<span>Ref</span>
   	</li>
   	<li class="verde">
       	<div class="prod">Verde</div>
       	<span>Ref</span>
   	</li>
   	<li class="preto verde">
       	<div class="prod">Preto e Verde</div>
       	<span>Ref</span>
   	</li>
   	<li class="branco">
       	<div class="prod">Branco</div>
       	<span>Ref</span>
   	</li>
   	<li class="azul">
       	<div class="prod">Azul</div>
       	<span>Ref</span>
   	</li>
</ul>
</div>

 

SCRIPT:

var cor = new Array();

$("#menu-cores ul li").each(function(index, element) {

var obj = $(this);
var txt = obj.find('span').text();
var sel = obj.find('div span');

obj.click(function(){

   	var filtro = txt.toLowerCase();

   	if (filtro.indexOf("todas") < 0)
   	{
       	obj.parent().parent().find('li:eq(0) div span').removeClass('select');
       	sel.toggleClass('select');
       	cor.push(filtro);
   	}
   	else
   	{
       	obj.parent().parent().find('li:not(:eq(0)) div span').removeClass('select');
       	sel.addClass('select');	
   	}

   	if (filtro.indexOf("todas") == 0) 
   	{
       	$('div.content ul li').show();
   	}
   	else
   	{
       	$.each(cor, function(index, value){
           	$('div.content ul li').each(function(index, element) {
               	if ($(this).attr("class").indexOf(value) < 0) {
                   	$(this).hide();
               	} else {
                   	$(this).show();
               	}
           	});

       	});
   	}

});

});

[JCMais 75]

Tava aqui de bobeira, e resolvi fazer esse filtro.

 

http://jsfiddle.net/JCMais/rAhap/

 

Ainda pode ser melhorado. :thumbsup:

[eronventer 2]

JCMais,

 

Muito obrigado, simplesmente demais, muito pratico!