I am attempting to use jQuery Quicksand to filter more that one list of items from a single set of option.
I have the plugin functional based off of a simple class (instead of the id) as the documentation would suggest. Here is my JS code:
$(function() {
// get the action filter option item on page load
var $filterType = $('#filterOptions li.active a').attr('class');
// get and assign the ourHolder element to the $holder varible for use later
var $holder = $('ul.articles');
// clone all items within the pre-assigned $holder element
var $data = $holder.clone()
console.log($data);
// attempt to call Quicksand when a filter option item is clicked
$('#filterOptions li a').click(function(e) {
// reset the active class on all the buttons
$('#filterOptions li').removeClass('active');
// assign the class of the clicked filter option element to our $filterType variable
var $filterType = $(this).attr('class');
$(this).parent().addClass('active');
var $filteredData = $data.find('li[data-type=' + $filterType + ']');
// call quicksand and assign transition parameters
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
});
return false;
});
});
However, when clicking one of the options, both lists are replaced with the results from the first list. You can see this occurring via this JSFiddle: http://jsfiddle.net/Dhk9T/
I presume that I need to edit the .clone()
section, perhaps with .each()
, buy I can't seem to get this working. Any suggestions!?