filter divs by class - jquery

Question

Hi,

there are several list filters in jquery (quicksand, filterprojects, etc.), but I am looking to filter divs by class.

I want the same functionality of the above - you select a menu item attached to a class and the other items fade out.

Anyone seen anything like this anywhere?

Answer 1

It's hard to understand what you are asking. But does this give you a place to start?

$("#myMenu ul li").mouseenter(function() {
  $(this).addClass("selected");
  $(this).siblings().addClass("other-selected");
});

Answer 2

Quicksand looks like it will do what you want: from the documentation - 'At the very basic level, Quicksand replaces one collection of items with another'.

I think you just need to add an element to display the results of the filtering, like so:

<ul id="flavourFilter">
    <li class="vanilla">Vanilla</li>
    <li class="strawberry">Strawberry</li>
    <li class="asparagus">Asparagus</li>  
</ul>

<div id="source">
  <div id="box1" class="vanilla">
  </div>
  <div id="box2" class="vanilla">
  </div>
  <div id="box3" class="strawberry">
  </div>
  <div id="box4" class="strawberry">
  </div>
  <div id="box5" class="asparagus">
  </div>
  <div id="box6" class="asparagus">
  </div>
</div>

<div id="display"></div>

Your jQuery would be something like:

$(function(){
    //To load the unfiltered list into the display as the initial state:
    $('#display').quickSand($('#source li'));

    //To filter based on clicks in the menu:
    $('#flavourFilter li').click(function(){
        $('#display').quickSand($('#source li.' + this.className));
    });
});

There's possibly a way to modify quicksand to use the same element for the source and the display (by hiding/showing elements, instead of adding and removing them from the DOM), but this should get you up and running, I think.

Let me know if you need more detail!

Answer 3

I ended up using:

    $("#box").click(function() {
$(".box").fadeIn();

});

$("#logo").click(function() {
 $(".box").fadeIn();
$(".box:not(.logo)").fadeOut();

});

$("#print").click(function() {
 $(".box").fadeIn();
$(".box:not(.print)").fadeOut(); 

});

$("#web").click(function() {
 $(".box").fadeIn();
$(".box:not(.web)").fadeOut();

});

and then:

     <li><a  id="box" href="#box">All</a></li>  
 <li><a id="logo" href="#logo">Logo</a></li>  
 <li><a id="print" href="#print">Print</a></li>  
 <li><a id="web" href="#web">Web</a></li>  
 <li><a href="#illustration">Illustration</a></li>  

Which works great, except due to the jquery.masonry.js layout, the areas where the div fades out, there is now an empty spot. I need to figure out how to reload masonry for each onclick so that the remaining items are shuffled into a new layout.

thoughts on that? and thanks for the help!

Answer 4

I wanted to do this too but couldn't figure out how to overcome the whitespace issue. I know the latest version of Mansory does support filtering but I found it a bit buggy when filtering the DOM.

You might want to just try changing the opacity of the .box to give a filter effect . See below :

// this filters all box divs related to web $("#web").click(function() { $(".box").stop().animate({opacity : 1}); $(".box:not(#web)").stop().animate({opacity : 0.2}); return false; });

// shows all box divs $("#all").click(function() { $(".box").stop().animate({opacity : 1}); return false; });

Answer 5

I think what you want is this:

HTML:

<ul>
  <li class="red">Red</li>
  <li class="green">Green</li>
  <li class="blue">Blue</li>
</ul>
<div>
  <div class="red">...</div>
  <div class="green">...</div>
  <div class="green">...</div>
  <div class="green">...</div>
  <div class="blue">...</div>
  <div class="blue">...</div>
</div>

jQuery:

$("ul li").click(function() {
  visibleClasses = $(this).attr("class").split(" ");
  $("div div").hide(); // or slideUp / fadeOut
  for(i in visibleClasses) {
    $("div div."+visibleClasses[i]).fadeIn(500); // or slideDown / show
  }
});

I hope it helps...